Need thumbnail image show large image separately, on mouseover

Cre8tvnrg · #1 (**permalink**) 04-19-04, 04:31 PM

Hi ALL...

PLEASE HELP! :{

I need to get a script that will enable me to have a larger image on the page change when I roll my mouse over a thumbnail elsewhere on the page.

I have set up my page in HTML where the large image (315x340) will be on the left and a series of 16 different thumbnails (85x85) each, are on the right. The first one should show as a default (both large and thumbnail), but when a user rolls over the other 15 thumbnails the corrolating larger image needs to swap with the defaulted image and should show up in the left window. Hope this makes sense!

To help you see what I mean, here's the link to my (not live yet) page:

http://www.ocphotoguy.com/weddings.html

note: The first row of thumbnails is just repeated FPO for rows 2-4, for right now.

Thanks SOOOO much for any help!!!!
Cre8tvnrg

TwoD · #2 (**permalink**) 04-20-04, 06:58 AM

I sent a pm with the code before but if anyone else wants to know I'll post it here too...

Cre8tvnrg · #3 (**permalink**) 04-20-04, 12:47 PM

Quote:

Originally Posted by TwoD

I sent a pm with the code before but if anyone else wants to know I'll post it here too...

TwoD --

You're the BOMB - that was soo easy! THANK YOU SOO MUCH! You don't even know how much you helped me

Thank you, thank you!

Cre8tvnrg

TwoD · #4 (**permalink**) 07-06-04, 01:48 PM

Here's the small script:

<script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.re place("_th","")
}
</script>

Place an <img> tag somewhere in the page and give it the id BigOne. This is the image that will be replaced.

Put this in all the thumbnail <img> tags:

onMouseOver="Change_Big_One(this)"

If you use the same image both as a thumbnail and as the fullsize version, remove
----
.replace("_th","")
---
in the code above.

bilco105 · #5 (**permalink**) 08-07-04, 05:42 AM

Ok, I have the code below but it doesnt work. Any ideas? Can you fix it?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<img id="BigOne"> 
<img src="file:///C|/Documents%20and%20Settings/Dave_w/Desktop/1_thumb.gif" onMouseOver="Change_Big_One(this)" width="80" height="71"> 
<img src="file:///C|/Documents%20and%20Settings/Dave_w/Desktop/1_thumb.gif" width="80" height="71"> 
<img src="file:///C|/Documents%20and%20Settings/Dave_w/Desktop/1_thumb.gif" width="80" height="71"> 
</p></body>
</html>

TwoD · #6 (**permalink**) 08-08-04, 09:18 AM

First, when I wrote the script I assumed that all the thumbnails had the same name as the big image but with the extra "_th" before the file extension.
In your case you are using "_thumb" instead so you can either change that in the script or rename all your thumbnails.

Then it should work. If it doesn't you might have to give the big image a default src value (maybe a blank image). Sometimes you get an error when you try to change an attribute when it hasn't been given a value manually...

gldweb · #7 (**permalink**) 09-02-04, 01:10 PM

This is a great little script to have the thumbnails & enlarged pic to appear on the same page! It was exactly what I needed

I made one small modification - instead of onMouseOver I am using onClick - and herein lies the problem. The cursor does not change to the "pointing finger" when over the thumbnails. Is there any way to have the cursor change to the pointing finger when over one of the thumbnails?

Thanks!

gldweb · #8 (**permalink**) 09-02-04, 06:50 PM

Okay, I did some more research and got it figured out. I used CSS to identify the style of cursor to appear when over the thumbnail. There are two different commands "pointer" and "hand". Hand is used on IE prior to v6. IE6 accepts both "pointer" and "hand". All other browsers use "pointer". Basically I defined a style as:

img_cursor {cursor: pointer; cursor: hand;}

and added the class="img_cursor" to each of the thumbnail 'img' tags. Works on IE, Netscape and Opera

TwoD · #9 (**permalink**) 09-03-04, 01:01 AM

Didn't know about the cursor

ointer style since I mostly work in IE, thanks for sharing.

Oh btw, since I use the replace() method to remove the _th part, _th must not exist anywhere else in the path to your images.

Ex: mySite/_thumbs_and_images/myImage_th.jpg
will be changed to mySite/umbs_and_images/myImage_th.jpg
instead of mySite/_thumbs_and_images/myImage.jpg
because replace() only replaces the first occurance of the string unless you give it other argumnents.

gldweb · #10 (**permalink**) 07-18-05, 08:03 PM

I am looking for a modification to this script, if possible. This script displays the larger image on the same page as the thumbnails. I was looking for a script that would display the larger image in a new window.

Can anyone help?

Thanks