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

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

CSS Forum

    
css image rollover.
adamnichols45




msg:4214456
 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




msg:4214507
 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:4214939
 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




msg:4216521
 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