Web Search Hypergurl.com

Handy Tip : Making music play or giving sound as your cursor pointer runs over a link is a good effect for a web page. Keep the sound files short so your visitor gets the effect, as large files take longer to download and your visitor could miss what you are trying to achieve.

Bookmark This Page

Javascript; Play Sound Files on Mouseover of Link

There are 2 ways to play sound on mouseover. This first way seems to be more reliable than the javascript version

This is a great javascript which allows you to play different sounds as your visitors runs their mouse over each link or music on mouseover of an image.

Sitemap Run your mouse over the links for an example!

Java Scripts

Paint Shop Pro Tutorials

STEP 1

Place this first part of the script into the body (content) of your page which preloads the sound files.

Substitute the sound files for your own, below the fifth line. The first sound file will be 0, the second 1, the third 2 and so on. You can add as many different sound files as you have links.

<!-- --><bgsound id="soundfiles"> <script language="JavaScript"><!-- // Sound on Mouseover javascript supplied by http://www.hypergurl.com var aySound = new Array(); // PLACE YOUR SOUND FILES BELOW aySound[0] = "CHORD.wav"; aySound[1] = "DING.wav"; aySound[2] = "CHORD.wav"; // Don't alter anything below this line IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0; NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0; ver4 = IE||NS? 1:0; onload=auPreload; function auPreload() { if (!ver4) return; if (NS) auEmb = new Layer(0,window); else { Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>"; document.body.insertAdjacentHTML("BeforeEnd",Str); } var Str = ''; for (i=0;i<aySound.length;i++) Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>" if (IE) auEmb.innerHTML = Str; else { auEmb.document.open(); auEmb.document.write(Str); auEmb.document.close(); } auCon = IE? document.all.soundfiles:auEmb; auCon.control = auCtrl; } function auCtrl(whSound,play) { if (IE) this.src = play? aySound[whSound]:''; else eval("this.document.embeds[whSound]." + (play? "play()":"stop()")) } function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); } function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); } //--></script> <!-- -->

STEP 2

Simply add this code into each link, changing the number of the mouseover event to correspond to your sound file.

onMouseOver="playSound(0)" onMouseOut="stopSound(0)"

Your link code should look like this;

<a href="http://www.yourlink.com" onMouseOver="playSound(0)" onMouseOut="stopSound(0)">YOUR LINK</a>

Want to play music on mouseover of an image or object?

The first part of the javascript will be the same. The html code on the image or object will be similar to this:

<img src="yourimage.gif" onMouseOver="playSound(3)" onMouseOut="stopSound(3)">

Have fun!

Hypergurl Hosting

IMPROVED PLANS FREE Domain Name web hosting and domain registration

Hosting Log In Username: Password: Sign up