Current location: Hot Scripts Forums » General Web Coding » JavaScript » Need thumbnail image show large image separately, on mouseover

Need thumbnail image show large image separately, on mouseover

Closed Thread
  #1 (permalink)  
Old
New Member
 
Join Date: Apr 2004
Location: California
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Unhappy HELP!! Need thumbnail image show LRG image in separate area, on mouseover

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

Last edited by Cre8tvnrg; 04-19-04 at 04:51 PM.

Featured Marketplace Scripts (view more)

  #2 (permalink)  
Old
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
I sent a pm with the code before but if anyone else wants to know I'll post it here too...
  #3 (permalink)  
Old
New Member
 
Join Date: Apr 2004
Location: California
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
THANKS for your help!

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
  #4 (permalink)  
Old
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
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.
  #5 (permalink)  
Old
Newbie Coder
 
Join Date: Mar 2004
Posts: 18
Thanks: 0
Thanked 0 Times in 0 Posts
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>
  #6 (permalink)  
Old
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
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...
  #7 (permalink)  
Old
New Member
 
Join Date: Sep 2004
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
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!
  #8 (permalink)  
Old
New Member
 
Join Date: Sep 2004
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
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
  #9 (permalink)  
Old
Community VIP
 
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
Didn't know about the cursorointer 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.
  #10 (permalink)  
Old
New Member
 
Join Date: Sep 2004
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
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
Closed Thread

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Need help on a image slide show using php! xelanoimis PHP 2 10-16-03 06:51 PM


All times are GMT -5. The time now is 02:48 AM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.