Un son au passage de la souris

Description

Insérez un son, une musique au passage de la souris sur une image (onmouseover).
Le son s'arrête quand la souris sort de l'image (onmouseout).

Testé sous Internet Explorer et Chrome.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Insertion du son</title>
<script>
function PlaySound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
};

function StopSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Stop();
}
</script>
</head>
<body>
<table width="685" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="17%" align="center" valign="top">
<a href="#"><img src="coucou.jpg" width="133" height="137" hspace="2" border="0" onmouseover="PlaySound('sound1')" onmouseout="StopSound('sound1')" /></a><embed src="coucou.wav" autostart=false width=0 height=0 id="sound1" enablejavascript="true"></td>
<td width="20%" align="center" valign="top">
<a href="#"><img src="fauvette.jpg" width="133" height="137" hspace="2" border="0" onmouseover="PlaySound('sound2')" onmouseout="StopSound('sound2')" /></a><embed src="fauvette.wav" autostart=false width=0 height=0 id="sound2" enablejavascript="true"></td>
<td width="16%" align="center" valign="top">
<a href="#"><img src="geai_bleu.jpg" width="133" height="137" hspace="2" border="0" onmouseover="PlaySound('sound3')" onmouseout="StopSound('sound3')" /></a><embed src="geai.wav" autostart=false width=0 height=0 id="sound3" enablejavascript="true"></td>
<td width="15%" align="center" valign="top">
<a href="#"><img src="chouette.jpg" width="133" height="137" hspace="2" border="0" onmouseover="PlaySound('sound4')" onmouseout="StopSound('sound4')" /></a><embed src="chouette.wav" autostart=false width=0 height=0 id="sound4" enablejavascript="true"></td>
<td width="15%" align="center" valign="top">
<a href="#"><img src="mesange.jpg" width="133" height="137" hspace="2" border="0" onmouseover="PlaySound('sound5')" onmouseout="StopSound('sound5')" /></a><embed src="mesange.wav" autostart=false width=0 height=0 id="sound5" enablejavascript="true"></td>
</tr>
<tr>
	<td align="center" valign="top"><b><font color="#009900" size="2" face="Verdana, Arial, Helvetica, sans-serif">Coucou</font></b></td>
    <td align="center" valign="top"><b><font color="#009900" size="2" face="Verdana, Arial, Helvetica, sans-serif">Fauvette</font></b></td>
    <td align="center" valign="top"><b><font color="#009900" size="2" face="Verdana, Arial, Helvetica, sans-serif">Geai bleu </font></b></td>
    <td align="center" valign="top"><b><font color="#009900" size="2" face="Verdana, Arial, Helvetica, sans-serif">Chouette</font></b></td>
    <td align="center" valign="top"><b><font color="#009900" size="2" face="Verdana, Arial, Helvetica, sans-serif">Mesange</font></b></td>
  </tr>
</table>
</body>
</html>

Conclusion :


Ce code a été adapté de :
http://www.phon.ucl.ac.uk/home/mark/audio/play.htm.

où d'autres possibilités sont offertes.

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.