Image Thumbnail viewer II

[nicolebuena]

1) Script Title: Image Thumbnail viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:
When the user clicks the thumbnail and the larger image is displayed, I would like the larger image to be an "onmouseover" image (specifically for users to see a before/after picture simply by hovering over the enlarged image).

Here is what I'd like the large image to show:

<img onmouseover="this.src='http://cuttsandmutts.com/wp-content/uploads/2009/11/hs_before.jpg'" onmouseout="this.src='http://cuttsandmutts.com/wp-content/uploads/2009/11/hs_after.jpg'" src="http://cuttsandmutts.com/wp-content/uploads/2009/11/hs_after.jpg"/>

I pasted the above into the Image Thumbnail Viewer II code in place of the ".jpg" graphic and it did not work. What am I doing wrong?

Thanks in advance for your help, and for this amazing resource.

[jscheuer1]

Where exactly did you put that code? How many thumbnails do you have? If more than one, do you want the same onmouseover/onmouseout images for all the larger images, or different ones, depending upon which thumbnail was triggered.

Also, it would really help if we could see what you have so far:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[nicolebuena]

Thanks for your reply John. Here is a link to my site that should clarify what I am attempting to do:

http://buenadesigns.com/sample1.html

I will have several thumbnails and will continue to add more periodically. I would like different onmouseover/onmouseout images for each of the larger images, depending on which thumbnail is clicked.

Additionally, sometimes instead of an onmouseover/onmouseout on the larger image, I would instead like the larger image to link to an external website when clicked. Couldn't figure out how to do this since the "a href" tag is already taken when using this script.

Thanks again!
Nicole

[jscheuer1]

I'm still looking into your request, but I noticed your existing code is not working in IE, and at least one other browser. That's because you have extra quote marks here:

<a href="webimages/large_makeupvector.jpg" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('Image8','','webimages/frillthumbnails/thumbnail_makeup_over.gif',1)" 
"rel="enlargeimage" rev="targetdiv:textboximage,trigger:click,preload:yes,fx:fade"><img src="webimages/frillthumbnails/thumbnail_makeup_up.gif" alt="Makeup Vector" name="Image8" width="72" height="86" border="0" id="Image8" /></a>

<a href="webimages/frillthumbnails/web_trc.jpg" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('Image13','','webimages/frillthumbnails/thumbnail_trcweb_over.gif',1)" 
"rel="enlargeimage" rev="targetdiv:textboximage,trigger:click,preload:yes,fx:fade"><img src="webimages/frillthumbnails/thumbnail_trcweb_up.gif" alt="TRC Website" name="Image13" width="72" height="86" border="0" id="Image13" /></a>

[nicolebuena]

Just removed the extra quotes - it should work for you now!

http://buenadesigns.com/sample1.html

[nicolebuena]

I'm still looking into your request, but I noticed your existing code is not working in IE, and at least one other browser. That's because you have extra quote marks here:

<a href="webimages/large_makeupvector.jpg" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('Image8','','webimages/frillthumbnails/thumbnail_makeup_over.gif',1)" 
"rel="enlargeimage" rev="targetdiv:textboximage,trigger:click,preload:yes,fx:fade"><img src="webimages/frillthumbnails/thumbnail_makeup_up.gif" alt="Makeup Vector" name="Image8" width="72" height="86" border="0" id="Image8" /></a>

<a href="webimages/frillthumbnails/web_trc.jpg" onmouseout="MM_swapImgRestore()" 
onmouseover="MM_swapImage('Image13','','webimages/frillthumbnails/thumbnail_trcweb_over.gif',1)" 
"rel="enlargeimage" rev="targetdiv:textboximage,trigger:click,preload:yes,fx:fade"><img src="webimages/frillthumbnails/thumbnail_trcweb_up.gif" alt="TRC Website" name="Image13" width="72" height="86" border="0" id="Image13" /></a>

Any luck with this one? Or is it not possible?