css image rollover.

Forum Moderators: not2easy

Message Too Old, No Replies

css image rollover.

adamnichols45

8:06 pm on Oct 9, 2010 (gmt 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>

enigma1

10:38 pm on Oct 9, 2010 (gmt 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.

Major_Payne

2:03 am on Oct 11, 2010 (gmt 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...]

tedster

3:37 am on Oct 14, 2010 (gmt 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.