homepage Welcome to WebmasterWorld Guest from 54.242.126.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css image rollover.
adamnichols45

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4214454 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4214454 posted 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



 
Msg#: 4214454 posted 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

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



 
Msg#: 4214454 posted 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved