Welcome to WebmasterWorld Guest from 54.167.85.221

Forum Moderators: not2easy

Message Too Old, No Replies

css image rollover.

     

adamnichols45

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

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member 5+ Year Member



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)

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



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month