I have searched for a Java script that would alow me to play a WAV sound when you mouse over on a link while at the same time dissolve that image.
I found two java scripts and after a few tries i have both working just fine except for one thing.....
The second JAVA script is setup to pre-load the WAV files, but when going over the links (5 in total) you will hear the same wave sound on all of them. I have inserted the script and the handling please if someone sees what I cant find ( a solution) please help!!!
----->first script is handling the disolving and works great !!!
<script type="text/javascript">
/*****************************************
* Dissolving Image Rollover- By Roy Whittle (
http://www.javascript-fx.com/)
* Featured on/available at
http://www.dynamicdrive.com/
* This notice must stay intact for use
*****************************************/
//Generate transition CSS (transition=0 to 23)
document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.3,transition=17) }</STYLE>');
//Uncomment the next line for fading rollovers instead of dissolving:
//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');
var onImages=new Array();
function Rollover(imgName, imgSrc)
{
onImages[imgName] = new Image();
onImages[imgName].src = imgSrc;
}
function turnOn(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].apply();
document.images[imgName].offSrc = document.images[imgName].src;
document.images[imgName].src = onImages[imgName].src;
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].play();
}
function turnOff(imgName){
if(document.images[imgName].filters != null)
document.images[imgName].filters[0].stop();
document.images[imgName].src = document.images[imgName].offSrc;
}
//Specify name of participating images, plus paths to their onMouseover replacements:
Rollover("images/home-off", "images/home-on.gif");
Rollover("images/about-off", "images/about-on.gif");
Rollover("images/monitoring-off", "images/monitoring-on.gif");
Rollover("images/equipment-off", "images/equipment-on.gif");
Rollover("images/crime-off", "images/crime-on.gif");
Rollover("images/faqs-off", "images/faqs-on.gif");
</script>
-----> this is the script that handles the WAV sounds but only plays the first one------
<script LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "home.wav";
aySound[1] = "about.wav";
aySound[2] = "monitor.wav";
aySound[3] = "equip.wav";
aySound[4] = "crime.wav";
aySound[5] = "faq.wav";
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();
next
}
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>
----->this is how i have the scripts running on my page --------
<td width="100%" height="37"><a href = "index.html"
onMouseOver="playSound(0); turnOn('images/home-off');"
onMouseOut="stopSound(0); turnOff('images/home-off');" ><img name="images/home-off" class="imgTrans"
src="images/home-off.gif" border="0" width="130" height="35" alt="index page"></a></td>
</tr>
<tr>
<td width="100%" height="37"><a href = "about.html"
onMouseOver="playSound(1); turnOn('images/about-off');"
onMouseOut="stopSound(1); turnOff('images/about-off');"><img name="images/about-off" class="imgTrans"
src="images/about-off.gif" border="0" width="130" height="35" alt="about us"></a></td>
</tr>
-------> in the second table it should play the second WAV sound but it only plays WAV[0]
I have 5 links and 5 sounds WAV[0] - WAV[5] on all links i hear WAV[0].
The image dissolving works good
what did I do wrong?
