Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Mettre du son sur une image au click


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2009
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 72
    Points : 39
    Points
    39
    Par défaut Mettre du son sur une image au click
    Bonjour,

    Je désirerais qu'on son soit joué quand on clique sur une image mais sans changer de fenêtre et sans que l'on voie de pavé concernant la gestion du son.

    J'ai essayé ici sur la photo du bas : http://www.grenault.net/mob_voxy1.htm mais cela ouvre une fenêtre.

    Merci pour votre aide.

    Meilleurs vœux !

    Guy

  2. #2
    Nouveau membre du Club
    Homme Profil pro
    Inscrit en
    mars 2009
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 21
    Points : 26
    Points
    26
    Par défaut
    Tu peux passer par du Javascript.

    Un son présent dans une div cachée. Et lorsque tu fais un onClick sur l'image, le son est lancé.

    Là pour le moment tu as mis un lien vers ton fichier mp3. Donc il est normal que celui-ci soit ouvert soit dans un autre onglet, soit dans l'onglet actuel.

    Regarde par ici :

    http://jannaud.fr/javascript-play-so...?id=35&maxi=10

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 953
    Points : 34 290
    Points
    34 290
    Par défaut
    Bonjour,
    J'ai essayé ici sur la photo du bas : http://www.grenault.net/mob_voxy1.htm mais cela ouvre une fenêtre.
    un peu normal compte tenu du code HTML et de la présence de target="_blank".
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <a title="WAF WAF WAF WAF WAF WAF !!!" target="_blank" href="voxi_aboiements.mp3">
    <img class="image" alt="Cavalier King Charles" src="tout_62_500px.jpg">
    </a>

  4. #4
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2009
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 72
    Points : 39
    Points
    39
    Par défaut
    Bien sur mais comment faire pour éviter cela ? Sans le target cela remplace la page en cours, c'est pire encore...

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    13 953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 13 953
    Points : 34 290
    Points
    34 290
    Par défaut
    dans ce cas une solution consiste à mettre une IFRAME comme target
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <a href="voxi_aboiements.mp3" target="id_iframe" title="WAF WAF WAF WAF WAF WAF !!!">
      <img src="tout_62_500px.jpg" alt="Cavalier King Charles" class="image">
    </a><br>
    <!-- DIV n'apparaissant pas -->
    <div style="width:1px;height:0px;overflow:hidden;">
      <iframe id="id_iframe" name="id_iframe" src=""></iframe>
    </div>

  6. #6
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2009
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 72
    Points : 39
    Points
    39
    Par défaut
    Je vais essayer demain. Cela me semble une bonne solution !

    Je te tiens au courant.

    Merci.

  7. #7
    Membre émérite
    Avatar de Eric2a
    Homme Profil pro
    Technicien
    Inscrit en
    septembre 2005
    Messages
    1 225
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 49
    Localisation : France, Corse (Corse)

    Informations professionnelles :
    Activité : Technicien

    Informations forums :
    Inscription : septembre 2005
    Messages : 1 225
    Points : 2 411
    Points
    2 411
    Par défaut
    Salut,

    On peux aussi contrôler (à l'aide de Javascript) un player MP3 développé en Flash.

    Par exemple avec Flash mp3 Player JS

    Code xhtml : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    	<title>Lecteur MP3</title>
    	<script type="text/javascript">//<![CDATA[
                    var player={
                            onInit:function(){return},
                            onUpdate:function(){return},
                            play:function(){
                                    var obj=document.getElementById('playerFlash');                         
                                    obj.SetVariable('method:setPosition',0);
                                    obj.SetVariable('method:play','');
                            }
                    }
            //]]>
            </script>
    </head>
    <body>
    	<div>
    		<object id="playerFlash" type="application/x-shockwave-flash" data="player_mp3_js.swf" width="1" height="1">
    			<param name="movie" value="player_mp3_js.swf" />
    			<param name="AllowScriptAccess" value="always" />
    			<param name="FlashVars" value="listener=player&amp;enabled=0&amp;volume=100&amp;mp3=voxi_aboiements.mp3" />
    		</object>
    		<a href="voxi_aboiements.mp3" title="WAF WAF WAF WAF WAF WAF !!!" onclick="player.play();return false;">
    			<img src="tout_62_500px.jpg" alt="Cavalier King Charles" class="image" />
    		</a>
    	</div>
    </body>
    </html>

  8. #8
    Nouveau membre du Club
    Profil pro
    Inscrit en
    mars 2009
    Messages
    72
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mars 2009
    Messages : 72
    Points : 39
    Points
    39
    Par défaut
    Voilà, je l'ai mis sur mon site. Génial sur la version WEB !!!

    Ne fonctionne pas sur la version mobile, probablement à cause de l'iframe. Je vais essayer en utilisant la balise audio. La version mobile de cette page est en HTML5.

    Comment te remercier ? Un lien vers ton site, par exemple ?

    Guy

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. jouer un son sur une image passage souris
    Par ideal23 dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 16/11/2009, 09h37
  2. ajouter un son sur une image dans un menu
    Par ideal23 dans le forum Dreamweaver
    Réponses: 0
    Dernier message: 07/11/2009, 13h14
  3. mettre du texte sur une image
    Par torn33260 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 03/02/2008, 13h03
  4. [HTML] Mettre un lien sur une image
    Par mavina dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 24/04/2006, 16h34
  5. Comment mettre un label sur une image
    Par dug dans le forum MFC
    Réponses: 3
    Dernier message: 07/04/2004, 11h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo