Issue with image swap behaviour in grid layout results

8/13/2010 12:06 pm | #1 iainmacdonald331081

Not sure what the problem is here - I've got a page with some results in a grid layout repeating table, with a button to view the details page.

However, the image swap behaviour on the 'Learn More...' button only seems to work if there is only one result :

tourdetails.php?packageID=137

But if there are more than one result it doesn't work :

tourdetails.php?packageID=142

This is the code :

<img src="images/learnbutton1.jpg" alt="View" name="View" border="0" id="View" onMouseOver="MM_swapImage('View','','plugins/images/learnbutton2.jpg',1)" onMouseOut="MM_swapImgRestore()"  />

Any ideas?

8/16/2010 4:12 am | #4 neilo

Hi Ian,

I don't know what I was on last night, but have checked and rollovers are not working as I said.

I think (others may confirm/explode) that each instance of the swap image behaviour has to have a distinct name/ID, i.e. image1, image2 etc for each instance to work:

<body onload="MM_preloadImages('plugins/images/learnbutton2.jpg')">
<p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','plugins/images/learnbutton2.jpg',1)"><img src="images/learnbutton1.jpg" name="Image1" width="123" height="25" border="0" id="Image1" /></a></p>
<p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','plugins/images/learnbutton2.jpg',1)"><img src="images/learnbutton1.jpg" name="Image2" width="123" height="25" border="0" id="Image2" /></a></p>
<p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','plugins/images/learnbutton2.jpg',1)"><img src="images/learnbutton1.jpg" name="Image3" width="123" height="25" border="0" id="Image3" /></a></p>
<p><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','plugins/images/learnbutton2.jpg',1)"><img src="images/learnbutton1.jpg" name="Image4" width="123" height="25" border="0" id="Image4" /></a></p>

If I copy code for line 1 and paste to get more instances (so each has same name/ID) the roll-over fails. If these are being added dynamically, an incremental value will need (I believe) to be dynamically assigned to each instance.

The above code can be seen in a 'clean' page example here

8/16/2010 7:21 am | #5 Jason ByrnesWebAssist

Neilo, you are exactly correct:

each image will need to have a unique ID:

<img src="images/learnbutton1.jpg" name="Image1" width="123" height="25" border="0" id="Image1" />
<img src="images/learnbutton1.jpg" name="Image2" width="123" height="25" border="0" id="Image2" />

and the onMouseOver code will need to be adjusted to usee that images unique id value:

onmouseover="MM_swapImage('Image1','','plugins/images/learnbutton2.jpg',1)"
onmouseover="MM_swapImage('Image2','','plugins/images/learnbutton2.jpg',1)"

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Issue with image swap behaviour in grid layout results

8/13/2010 12:06 pm | #1 iainmacdonald331081