[SOLVED] multiple image rollover not restoring image

[snappy]

I have two pairs of images that are linked.

When user rollovers img1 it changes to img2, and on another part of the page (on an image map) img3 changes to img4. Likewise when the user rolls over img3, then img1 changes too.

My problem is the imgRestore command only seems to work on one pair of images at a time. i.e. img1 restores but img 3 doesn't and vice versa

Any tips on how to get both pairs of image to restore on mouseOut?

Code: Select all

  

<td>

<a href="#"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('img1','','../../_globalimages/enOnly/lin/img2.gif',1);MM_swapImage('img3','','../../_globalimages/enOnly/lin/img4.gif',1)">  
        
        <img src="../../_globalimages/enOnly/lin/sd.gif" alt="go to South Denbighshire district" name="southDenbighshire_text" width="120" height="15" border="0" id="southDenbighshire_text" /></a>

</td>

and the image map..

Code: Select all

<area shape="poly" coords="182,49,181,62,168,76,183,89,180,129,189,130,201,113,229,110,223,102,227,84,218,66,205,68,200,55" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('img1','','../../_globalimages/enOnly/lin/img2.gif',1);MM_swapImage('img3','','../../_globalimages/enOnly/lin/img4.gif',1)"  alt="go to South Denbighshire district" title="South Denbighshire district"  />

[Rakuli]

Can you show the actual javascript functions please. I can't see what might be causing the error without seeing them

[snappy]

Would any problem be here? I thought it would be in the html. Or do I misunderstand?

Code: Select all

<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>

[Rakuli]

Yeah, I needed to see what your code was doing so I could see how it was wrong in your HTML

I think your problem is that you are calling the function too often, you only need to call it once and add all the necessary images to it...

Code: Select all

<td>

<a href="#"  onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('img1','','../../_globalimages/enOnly/lin/img2.gif''img3','','../../_globalimages/enOnly/lin/img4.gif',1)">  
        
        <img src="../../_globalimages/enOnly/lin/sd.gif" alt="go to South Denbighshire district" name="southDenbighshire_text" width="120" height="15" border="0" id="southDenbighshire_text" /></a>

</td>


<area shape="poly" coords="182,49,181,62,168,76,183,89,180,129,189,130,201,113,229,110,223,102,227,84,218,66,205,68,200,55" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('img1','','../../_globalimages/enOnly/lin/img2.gif','img3','','../../_globalimages/enOnly/lin/img4.gif',1)"  alt="go to South Denbighshire district" title="South Denbighshire district"  />

The code's a bit hard to read but that may help

[snappy]

You are right, brilliant, thanks.

Just needed an comma between the two image swaps too.

Cheers for your help!