Image Flip With Sound

[icon kid]

Have you ever wanted to make link buttons that not only flip but also make a sound when they flip? -- like a "click" sound or whatever. See this demo: (for a Mazda RX7 Car Club -- pass the mouse pointer over the link buttons.)

Revolution Zero (http://www.jeffs-icons.net/RevZero/RevZero-F.html)

Below is the script. Just insert the name of your sound file where it says car3.wav.
At some point, the script turns from a sound loader into an image loader -- that begins at this line:

if (document.images)


<script LANGUAGE="JavaScript">
var aySound = new Array();
// Below: source for sound files to be preloaded
aySound[0] = "car3.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); }

if (document.images)
{img1on = new Image();
img1on.src = "CI-on.gif";
img1off = new Image();
img1off.src = "CI-off.gif";}

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");}
}
function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off.src");}
}
//
</script>
There are five links buttons in the demo but only the introduction of "img1" is shown in this sample script.

In the document body, an anchor uses an onMouseOver to call for both the image flip AND the sound play.
Then it uses an onMouseOut to both revert the image and stop the sound play.

<P><A HREF="http://www.jeffs-icons.net/RZ/CI-F.html" TARGET=_top onMouseOver="imgOn('img1'), playSound(0)" onMouseOut="stopSound(0), imgOff('img1')"><IMG SRC="CI-off.gif" NAME="img1" border=0 ALT="Club Info"></A>

[Brandoe85]

Doesn't work in firefox.

[icon kid]

I never looked into anything about Firefox until you mentioned it. I see that it's popular and still fast-growing. Is it all Javascript that it's incompatible with, or just certain Javascript commands?

-- Jeff