script to make a link list onMouseOver show a thumbnail in the same spot on webpage

**DanaOldfather** · 03-30-2010, 08:31 PM

Hello folks,

I'm looking for a script that will make a link list with onMouseOver show a thumbnail in the same spot on webpage. See example here. Thank you so much for taking the time to answer.

Best,

Dana O.

**djr33** · 03-31-2010, 12:30 AM

Any rollover/mouseover image script should work.

Here is how to change it:
1. rollover images are applied to IMAGES-- apply it to the links instead. (<a> tag instead of <img> tag.)
2. There is no image at all of no link is hovered over. You can either leave a default image (or a "blank"-- white-- image), or you can use display:none when no link is active (onmouseout, and by default). Basically just add that action to the javascript function.

**BLiZZaRD** · 03-31-2010, 02:14 AM

djr hit it on the head (as per usual) and I am a day late and a dollar short... again.

but, open forum right?

Have a look at Stu Nichol's CSS Play. Some GREAT menus there, and easily followed and adapted to your purpose.

For example the pop up image menu found here Instead of having the images appear with borders and such in different places, find the spot on your page and have them all appear in the same spot.

Or.. if you want a JS answer look at how the linked page you gave us does it:

Code:

<script language="javascript">
<!-- 

function showImage(image) {
	document.getElementById('imageC').src = image;
}

function hideImage() {
	document.getElementById('imageC').src = 'images/spacer30.gif';
}

//-->
</script>

The above goes in the <head> section... the following goes on the links:

Code:

<a href="gallery_of_artists/contemporary/bergholz.htm">david bergholz</a></span><br>
			<span id="choice3" style="cursor:hand" onmouseover="showImage('images/gallery_of_artists/tn/TN146_Biro.jpg');" onmouseout="hideImage();">

Then have a div or such named id="imageC" where you want the images to appear.

The page you referenced does it in table form, with the blank image as the last TD as such:

Code:

<td width="146" valign="top" height="378"><span id="boxdescription">

			<img src="images/spacer30.gif" id="imageC" width="146" height="146"></span> </td>

**DanaOldfather** · 04-01-2010, 07:32 PM

Thanks so much! I'm really a beginner, and I really appreciate the time you took to break out all that code. I did view source on that page but wasn't sure if I was missing some scripting somewhere. One other question - the "images/spacer30.gif" is just a blank box that I will need to make, in say fireworks, and insert into my table right? If so, I think I get it. Thanks again!

Dana O.

**BLiZZaRD** · 04-01-2010, 07:36 PM

That is correct. It is just a place holder so there is content there. That way the page doesn't jump and re-size when an image is inserted or removed via the hover.

**estherrolle** · 04-03-2010, 10:50 AM

For example the pop up image menu found here Instead of having the images appear with borders and such in different places, find the spot on your page and have them all appear in the same spot.

Seo tips

Thread: script to make a link list onMouseOver show a thumbnail in the same spot on webpage

Thread Tools

Search Thread

script to make a link list onMouseOver show a thumbnail in the same spot on webpage

The Following User Says Thank You to djr33 For This Useful Post:

The Following User Says Thank You to BLiZZaRD For This Useful Post:

hi

Bookmarks

Bookmarks

Posting Permissions