PDA

View Full Version : rollover image + lightbox together


graemepark
10-07-2008, 08:57 PM
I have a rollover thumbnail that changes from black and white to colour...with the following code...

<td width="120"><div align="center"><a href="Art.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','trabajos dd/monaart.jpg',1)"><img src="trabajos dd/monabw.jpg" name="Image9" width="120" height="120" border="0" id="Image9" /></a></div></td>

I have another thumbnail that uses lightbox to launch the full size image with the code below...

<td width="134"><div align="center"><a href="photo/castillo.jpg" rel="lightbox[roadtrip]"title="Castillo"><img src="photo/castillobw.jpg" width="70" height="70" border="0" /></a></div></td>

what i would like is to combine the two, so when i rollover it changes to colour and then on the click it launches the lightbox console...all i have managed to do by combining these codes myself is ruin the lightbox or the thumbnail....can any1 show me how it would read?

thanks!

Corrosive
10-08-2008, 02:37 PM
I have a rollover thumbnail that changes from black and white to colour...with the following code...

<td width="120"><div align="center"><a href="Art.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','trabajos dd/monaart.jpg',1)"><img src="trabajos dd/monabw.jpg" name="Image9" width="120" height="120" border="0" id="Image9" /></a></div></td>

I have another thumbnail that uses lightbox to launch the full size image with the code below...

<td width="134"><div align="center"><a href="photo/castillo.jpg" rel="lightbox[roadtrip]"title="Castillo"><img src="photo/castillobw.jpg" width="70" height="70" border="0" /></a></div></td>

what i would like is to combine the two, so when i rollover it changes to colour and then on the click it launches the lightbox console...all i have managed to do by combining these codes myself is ruin the lightbox or the thumbnail....can any1 show me how it would read?

thanks!

You should be able to do this.

From the 'Lightbox Support':

This is commonly caused by a conflict between scripts. Check your body tag and look for an onload attribute. Example:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
A quick fix to this problem is to append the initLightbox() to the onload attribute as so:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">

If you are using rollover images you will need to do this as rollovers are js as well.