Mouse over change 2 images

[nate51]

I am using the roll over function in DreamWeaver and was wondering if there is a way to edit it to change 2 images on a mouse over vs the one it does by default?

The Javascript

<script type="text/javascript">
<!--
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_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_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 the HTML

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('about','','../../images/global/header/about_btn_o.jpg',1)"><img src="../../images/global/header/about_btn.jpg" name="about" width="68" height="29" border="0" id="about" /></a>

Any help with this would be great. I don't want to chnage the javascript if possible as it's quick and easy to set up.

[nate51]

I am starting to wonder if this will fall into the Javascript section soon.

I am able to change both images on one mouse over, the problem I have now is on a mouse out, only the second image changes back, the first image (the one I am mousing over) does not change back to the original. I am new to javascript so I am not sure what part of the code I would need to change to let the first image, the one with the href command to revert back to the original image.

Can anyone see what is going on here and point me in the right direction?

JavaScript

<script type="text/javascript">
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_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_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>

HTML

<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pic01','','images/thumbs/unilever03.jpg',1);MM_swapImage('pic02','','images/unilever03.jpg',1)"><img src="images/thumbs/unilever02.jpg" name="pic01" width="38" height="37" border="0" id="pic01" /></a>
<img src="images/unilever02.jpg" name="pic02" width="330" height="220" border="0" id="pic02" />

[mat420]

i tried but without an example and, seeing what results i got when i put this into an html file, i cant. maybe try posting a live example

[nate51]

Here is a working example http://nateweb.ca/preview/nav_test/

As you can see the second image changes on the first image mouse over action. But the first image does not go back on mouse out.