DHTML Behaviors Library - SoundRollover - JavaScript Made Easy: Free JavaScripts Tutorials Example Code

<HTML>
<HEAD>
<TITLE>Behavior Library: Sound Rollover</TITLE>

<STYLE>
.SoundRollover { behavior : url(soundRollover.htc) ;
                 font-family : Arial ;
                 font-size : 24pt ;
                 color : black ;
                 padding : 5 ;
                 width : 100% ;
                 cursor : hand ;
                 text-align : center ;
                 font-weight : bold ;
                }
A:link { color:#003399; text-decoration:none; }
A:visited { color:#6699CC; text-decoration:none; }
A:hover { text-decoration:underline; }
</STYLE>

function BodyOnClick()
{
  e = window.event.srcElement
  if (e.tagName == "DIV")
  {
    e.style.color = (e.currentStyle.color == 'black') ? 'white' : 'black'
  }
}

</SCRIPT>

</HEAD>

<H2><FONT FACE="verdana,arial,helvetica" SIZE=1> </FONT></H2>
<TABLE border=0 cellpadding=20 width="100%">
  <tr>
    <td width="50%">
      <div class="SoundRollover" style="background-color : #FF3000" hoverSound="whoosh.wav" pressedSound="chitty.wav">Internet</div>
    </td>

<td width="50%">
      <div class="SoundRollover" style="background-color : #63CF31" hoverSound="whoosh.wav" pressedSound="chitty.wav">Explorer</div>
    </td>
  </tr>

<tr>
    <td width="50%">
      <div class="SoundRollover" style="background-color : #009AFF" hoverSound="whoosh.wav" pressedSound="chitty.wav">Behavior</div>
    </td>

<td width="50%">
      <div class="SoundRollover" style="background-color : #FFCF00" hoverSound="whoosh.wav" pressedSound="chitty.wav">Technology</div>
    </td>
  </tr>
</TABLE>

<P>

</BODY>
</HTML>

The soundRollover behavior provides a script-free method for web page authors to add sound effects to elements to make them respond to mouse interaction. In the past, some web sites have used Java applets to create rollover sound effects because Java provides a sound API. This behavior allows a similar effect without the need for code.