Welcome to WebmasterWorld Guest from 54.196.233.208

Forum Moderators: not2easy

Message Too Old, No Replies

css image rollover.

     
8:06 pm on Oct 9, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 16, 2004
posts:946
votes: 0


Im pulling my hair out here.

I have a page designed in html tables.

basically I have 1 main image and 2 thumbnails.

When I rollover the thumbnails I want the main image to change to the thumbnail image.

heres the code.


#gallery a span{
display:none;
}

#gallery a:hover span{
position:absolute;
width:403px;
height:406px;
float:left;
top:110;
left:0;
display:block;
}

<tr><td><span id="gallery">

<a href="#">
<img src="images/5_stars.gif" alt="gallery thumbnail" />
<span><img src="images/5_stars.gif" alt="gallery image" /></span>
</a>

<a href="#">
<img src="images/van.gif" alt="gallery thumbnail" />
<span><img src="images/van.gif" alt="gallery image" /></span>
</a>

</span></td></tr>
10:38 pm on Oct 9, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Apr 30, 2007
posts:1394
votes: 0


I am not sure if I understand the problem correctly if you want to have the effect in different table cells but give the following code a try which does that.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test page</title>
<style type="text/css">
body {margin:0; padding: 0}
div {position: relative; margin:0; padding: 0}

#gallery1 a span, #gallery2 a span {
display:none;
}

#gallery1 a:hover span, #gallery2 a:hover span {
display:block;
}

#gallery1 a:hover .dyn, #gallery2 a:hover .dyn {
display:none;
visibility: hidden;
}

</style>
</head>
<body>
<table border="1">
<tr><td><span id="gallery1">
<a href="#1">
<img src="images/5_stars.gif" alt="gallery thumbnail" class="dyn" />
<span><img src="images/5_stars.gif" alt="gallery image" /></span>
</a>
</span>
</td>
<td><span id="gallery2">
<a href="#2">
<img src="images/van.gif" alt="gallery thumbnail" class="dyn" />
<span><img src="images/van.gif" alt="gallery image" /></span>
</a>

</span></td></tr>
</table>

</body>
</html>


I created 2 different cells, you had few issues with your gallery selector, the top property needs to have units.
2:03 am on Oct 11, 2010 (gmt 0)

Full Member

joined:July 31, 2005
posts:272
votes: 0


Using tables to contain thumbnails which will be changed to a larger image on mouseover is not a good idea. Table cells change size with content and you would need to make your cells the size of the larger images then center the thumbnails.

Better if you used something like Lightbox 2 [lightbox2.com] where the larger image is a nice popup image with or without a caption.

Or, one that's an onClick:

Lightbox image viewer 2.03a [dynamicdrive.com]

This software is good to use and free:

Visual Lightbox [visuallightbox.com]

These are CSS Mouseovers:

[cssdrive.com...]
[chromaticsites.com...]
[wellstyled.com...]
[htmlgoodies.com...]
[w3schools.com...]
[tutorio.com...]
3:37 am on Oct 14, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


adamnichols45 - have either of these replies given you the help you were looking for?

For example, I'm not clear whether you need the rollover image to appear always in the same position on the page, and if so where. The html mark-up you posted above looks like it's only for the thumbnails.