Mettre du son sur une image au click

Version imprimable

08/01/2012, 12h22
kurtbosh

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
08/01/2012, 13h30
Bouffe

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
08/01/2012, 16h17
NoSmoking
Bonjour,

Citation:

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:

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>
08/01/2012, 16h46
kurtbosh

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

dans ce cas une solution consiste à mettre une IFRAME comme target

Code:

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>

08/01/2012, 20h12
kurtbosh

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

Je te tiens au courant.

Merci.

Salut,

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

Par exemple avec :fleche: Flash mp3 Player JS

Code:

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>

09/01/2012, 17h44
kurtbosh

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