Mettre du son sur une image au click

**kurtbosh** · 08/01/2012, 12h22

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

**Bouffe** · 08/01/2012, 13h30

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

**NoSmoking** · 08/01/2012, 16h17

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>

**kurtbosh** · 08/01/2012, 16h46

Bien sur mais comment faire pour éviter cela ? Sans le target cela remplace la page en cours, c'est pire encore...

**NoSmoking** · 08/01/2012, 19h54

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>

**kurtbosh** · 08/01/2012, 20h12

Je vais essayer demain. Cela me semble une bonne solution !

Je te tiens au courant.

Merci.

**Eric2a** · 08/01/2012, 20h24

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>

**kurtbosh** · 09/01/2012, 17h44

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

Mettre du son sur une image au click

HTML

Discussions similaires

Partager

Partager