Unofficial Tips and Tutorials for Homestead SiteBuilder™ Users


Home - Tips & Tutorials - JavaScript Demos - Java Applet Demos - Resources - Contact

onMouseover/onClick Sound Event Script by JavaScriptArchive from JavaScript Kit >>>

This script is made for IE and Netscape Navigator users. It doesn't work with Mozilla/Firefox, though, unless there is a plugin comparable to Netscape's LiveAudio which is required for Netscape 3.x+ (doesn't work with Mozilla-based Netscape browsers) users to hear the sounds. There are two parts to this script.

1) Copy-and-paste (CTRL-V) the script below into the Insert HTML element as shown. Minimize the element and put it out of the way in a corner. (This is normally placed within the <head></head> tags.) 

Depending on how many sounds you use per page, you can use more than one aySound[ ] array as I show below. If you use only one sound file, then keep the line aySound[0] only. Replace the sound file name(s) in the script for yours.

<script LANGUAGE="JavaScript"><!--
// Preload and play audio files with event handler (MouseOver sound)
// designed by JavaScript Archive, (c)1999
// Get more free javascripts at http://jsarchive.8m.com

var aySound = new Array();
// Below: source for sound files to be preloaded
aySound[0] = "files/sound1.wav";
aySound[1] = "files/sound2.wav";
aySound[2] = "files/sound3.wav";
aySound[3] = "files/sound4.wav";
aySound{4} = "files/sound5.wav";

// DO NOT edit below this line
document.write('<BGSOUND ID="auIEContainer">')
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.auIEContainer: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>

2) Use one of the following event handlers, depending on what you want to use for the mouseover, in another Insert HTML element placed anywhere on your page where you want it to appear. Be sure you use the correct playSound(X) event handler if you have more than one, where X is a number from 0 to whatever. See the demo below each script.

a) onMouseOver/ onMouseOut Sound with Link

<A HREF="yourpage.html" onMouseOver="playSound(0)" onMouseOut="stopSound(0)">Move Cursor Over Here</A>

Move Cursor Over Here

b) onClick Sound

<A HREF="javascript:playSound(1);">Click Here for Sound</A>

Click Here for Sound

c) With Standard Gray Button

<INPUT TYPE="BUTTON" VALUE="Click Here!" onClick="playSound(2)">

d) Mouse Click With a Graphic Image

<IMG SRC="files/image.gif" alt="text" border="0" onClick="playSound(3)">

text

e) Mouseover With Graphic Image and Link to a Page

<A HREF="yourpage.html" onMouseOver="playSound(4)">
<IMG SRC="files/image.gif" alt="text" border="0"></A>

text

Sound files from The Wav Place (no longer valid source)
Try one of free wav sites at TheFreeSite instead
Graphics for buttons created at FlamingText
Formerly hosted at
www.geocities.com/ramblingtutor/

Home - Tips & Tutorials - JavaScript Demos - Java Demos - Resources - Contact

Webpage graphics by Arride Graphics
Copyright © 2000- Rambling Tutor and JanetS
All Rights Reserved
All other copyrights belong to their respective owners as noted.


Plus 260 visitors before joining Site Meter on June 11, 2001