avec la balise
embed ce ne sera surement pas possible,
tu va devoir mettre les main un minimum dans le code javascript
à ta place je ferais un truc dans le style :
dabord sur tes gif, mettre les fichiers son associés, via des atributs
data-, et une classe pour les sélectionner facilement
<img class="hoverzik" data-mp3="toto.mp3" data-ogg="toto.ogg" src="toto.gif" />
après en utilisant jquery et jplayer :
[source=js]$(".hoverzik").each(function()
{ var img = $(this);
img.after("<div></div>"); var jdiv = img.next(); // on cré un div à coté de l'image pour le player
jdiv.jPlayer( {
// on charge le/les fichier(s) son défini(s) par les data html5 (attributs data-*)
ready: function(){ jdiv.jPlayer( "setMedia", img.data() ); },
// une fois la lecture fini, on la relance
ended: function() { jdiv.jPlayer("play"); }
});
img.hover(function()
{ // la sourie rentre dans l'image
jdiv.jPlayer("play");
},function()
{ // la sourie sort de l'image
jdiv.jPlayer("stop");
});
});[/source]
pour l'exemple j'ai pris jplayer, n'utilise pas seulement ton intuition mais aussi l'
api.
j'ai aussi utilisé jquery pour sélectionner les images et pouvoir leur placer des évènements au hover
je n'ai pas testé le code, c'est simplement pour te donner une idée quant à la voie à suivre,
le fait d’insérer des div pour le player n'est peu être pas obligatoire, à toi de tester, de plus j’insère les div après chaque image, mais peu être serais plus judicieux de les regrouper tous dans un même div en absolue placé direct dans le body, histoire de ne pas foutre la merde ailleurs ?