[SOLVED] multiple image rollover not restoring image

snappy · #1 Nov 5th, 2007, 10:03

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 · #2 Nov 5th, 2007, 10:15

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

snappy · #3 Nov 5th, 2007, 10:23

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 · #4 Nov 5th, 2007, 10:46

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 · #5 Nov 5th, 2007, 14:38

You are right, brilliant, thanks.

Just needed an comma between the two image swaps too.

Cheers for your help!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hover over text to rollover an image?	Dapandyman	Web Page Design	3	Feb 24th, 2008 08:12
Rollover image links - eek...why aren't they working??	supanova75	Web Page Design	7	Nov 15th, 2007 12:47
Rollover image with links on new image	stoob	JavaScript Forum	2	Feb 8th, 2007 22:05
image rollover	renren	Web Page Design	3	Feb 13th, 2006 12:54
Rollover Image Problem!	edejo	JavaScript Forum	2	Dec 16th, 2005 01:44

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] multiple image rollover not restoring image