[résolu/_.js]Jingle sonore grâce au .css: problème InternetExplorer8

Bonjour,
j'achève actuellement la rédaction d'un petit siteWeb personnel, où je mets à profit une astuce .css grâce à laquelle je fais jouer des jingles sonores au survol du curseur. Donc sans javascript!

Je présume que les visiteurs possèdent le Adobe ShockWavePlayer.

1. je transcode un son mp3 en "video sans image" au format .swf
2. j'écris par exemple le .css suivant:

.jingle {
display:inline;
position:relative;
color:#666 }

.jingle:hover {
color:#ccc }

.jingle span {
display:none }

.jingle:hover span {
position:absolute;
top:-1em;
left:0 }

3. j'écris par exemple le .htm suivant:

<a href="_.htm" class="jingle">Cliquer<span><object type="application/x-shockwave-flash" data="_/jingle-1.swf" width="1" height="1">
<param name="movie" value="_/jingle-1.swf" />
<param name="wmode" value="transparent" />
<param name="play" value="true" />
<param name="loop" value="false" />
</object></span></a>

L'intérêt est de ne pas utiliser de .js, car le .css suffit ici à effectuer la mise en cache du .swf dès le chargement de la page, et de le restituer instantanément au survol du curseur. Le jingle s'interrompt aussitôt que le curseur quitte la zone active. Et c'est bluffant!

Le rendu dans les navigateurs suivants est "parfait": FireFox, Opera, Safari et Chrome. Or InternetExplorer8 présente deux problèmes:
1. aussitôt engagée, il maintient la lecture du jingle jusques à son terme, malgré le retrait du curseur. Ceci devient gênant lorsque plusieurs jingles se succèdent, évidemment ...
2. une deuxième lecture du jingle est impossible, sauf à actualiser la page.

Ma question est: existe-t-il une astuce qui impose à InternetExplorer de stopper la lecture du jingle dès le retrait du curseur; et une seconde astuce qui lui permette de rejouer plusieurs fois le jingle?

Je vous remercie d'évoquer une solution ...

Ci-joint une capture partielle où apparaît mon menu. 2 jingles y figurent: sur l'animation .swf carrée et sur "contact" ...


[edit img]
Modifié par zebulin (10 Feb 2010 - 14:05)

Bon bon bon! malgré nos connaissances et nos recherches, aucune solution en _.css n'est apportée ce jour.

Pour ma part, je dois me résoudre à utiliser du javascript avec une solution (fort rare et opérationnelle) que j'ai dénichée ici: http://viti-vino.blogspot.com/2009/06/sonoriser-ses-images-avec-dewplayer.html (juillet 2008, juin 2009).

Cette solution fonctionne bien sur tous les navigateurs modernes, malgré quelques imprécisions d'écriture ...

Dans cette solution, une astuce serait de supprimer le onmouseout afin de permettre la lecture du _.mp3 au-delà du retrait du curseur. Au choix!

Enfin, j'imagine que le survol du curseur pourrait lire non seulement un _.mp3 avec son lecteur _.swf (minimalisé à 1px 1px), mais également une audio-vidéo _.swf avec son propre lecteur ...Mais il s'agirait d'un autre topic, si le cœur vous en contait!