...

View Full Version : Play Audio AND Swap Image on MouseOver



AlexRat
04-20-2005, 12:42 AM
I want an image to swap over on mouseover and revert on mouseout, which I can do, but I also want a small audio file to play aswell (there are 7 links on a navigation bar I want to do this).

I'm trying to get the script used here (http://www.javascriptkit.com/script/script2/soundlink.shtml) to work along side the code located at the bottom of this post (automatically created with Dreamweaver MX) and both will work seperately, but I don't know how to get them to work at the same time. Any ideas?


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

And if you know how to do that and feel like helping me even more, have a look at my related problem here (http://www.codingforums.com/showthread.php?t=56695). Oh go on... please. :o

PcMan
04-20-2005, 01:14 AM
Srry but i don't know how to do the sound part i do know how to do the image part.



<script>
function swapon1()
{
document.img1.src="img/nav1r.gif
}
function swapoff1()
{
document.img1.src="img/nav1.gif";
}
</script>
[code]
The red means that thats where your picture is located on your server.
The blue means that thats your swapon and off number, like that will be for navi 1, then the second navigation will be number 2....etc.

After you are done with all of your navigations you then enter these lines of code (but to your settings).

[code]
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr><td height="40" background="img/fon03.gif">

The green is the location of the place of the navi background located on your server.
Make sure your set everything to your needs.

After that you have to do the "onclick" function.



<a onclick="return true" onMouseOver="swapon1()" onMouseOut="swapoff1()" href="navi link 1"><img src="img/nav1.gif" width ="128" height="40" border="0" name="img1"></a><img src="img/separator.gif" width="2" height="40">

Everything in blue is what you have to change to your need but everything in black you leave it the way it is.


Ok, maybe you are still a little confused :confused:

Lets say for example i had 2 Navigation links that i wanted to do the swapon/off function, then you would use this type of code:

Then what i would be is put this code in the body tag of your html, where ever you navigation is.



<script>
function swapon1()
{
document.img1.src="img/nav1r.gif";
}
function swapoff1()
{
document.img1.src="img/nav1.gif";
}
</script>
<script>
function swapon2()
{
document.img2.src="img/nav2r.gif";
}
function swapoff2()
{
document.img2.src="img/nav2.gif";
}
</script>


<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr><td height="40" background="img/fon03.gif">
<a onclick="return true" onMouseOver="swapon1()" onMouseOut="swapoff1()" href="page.html"><img src="img/nav1.gif" width ="128" height="40" border="0" name="img1"></a><img src="img/separator.gif" width="2" height="40"><a onclick="return true" onMouseOver="swapon2()" onMouseOut="swapoff2()" href="page.html"><img src="img/nav2.gif" width="128" height="40" border="0" name="img2"></a><img src="img/separator.gif" width="2" height="40">
</table>



Hope that helps!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum