Getting a larger image to appear when hovering on smaller version of image?

[galvin]

What is the best way to have an image that is reduced to a specific size as a thumbnail, and on hover, shows the full size version of the image?

 

I did this code below originally, but it will not work because when you hover, this code simply shows the same size image (same size as the thumbnail) rather than the full size of the image.  And before you say it , I can't just add a specific height or width to the css because every picture is a different size and I want the TRUE size to show.

 

So while I expected this to be easy to figure out, I'm hung up on it and not sure the best way to do it. I gotta be missing something, right?  :-\

 

$output .= <td><a href='#' class='smallimage'><img src='" . $data['image'] . "' ";
				//Determine if height or width is bigger and set that to 50 pixels wide (necessary in order to keep image proportional and not stretch it)
						list($width,$height) = getimagesize($data['image']);
							if ($width > $height) {
								$output .= "width=50";
							} elseif ($height > $width) {
								$output .= "height=50";
							} else { //height and width must be equal so just set width = 50, but could just as easily set height to 50
								$output .= "width=50";
							}

			$output .= " /></a></td>";

THE CSS...

a.smallimage:hover img {
position: absolute;
z-index: 10000;
}

[galvin]

Anybody have any thoughts/suggestions/links regarding this?

[xyph]

This will be a CSS and/or JavaScript solution. Google is your friend

 

http://sonspring.com/journal/hoverbox-image-gallery

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

[galvin]

Google is actually my best friend, and I swear I tried to find a solution thru him and couldn't .  Anyway, thanks for these links, I'll check them out to see if they solve my specific problem with hovering an being able to show the original image size, not just a specific set size.

Thanks again for the links!

[sharmalay]

Hey mate, just saw your post and had an idea: you can set your image to the size you want it to be when it is moused over to start out with, then in the CSS specify the size you want it to be as a thumbnail (maybe 50px X 50px or whatever). Then, add the :hover pseudo-class/selector and set the width and height both to auto. I tried this in FF7, Opera 11 and both worked, IE7 it didn't work (although there's probably a hack for it somewhere, or you can use Javascript). So that's one option, if I am understanding what you want to do correctly. And you shouldn't need any Javascript to cover most browsers (probably, I didn't check newer (7/8) IE browsers or Safari/Chrome, but I would imagine they would work with the :hover selector as well.)

The CSS could look something like this:

<style type="text/css">
#picture {width: 50px; height: 38px;}            /* Whatever size thumbnail/icon should be */
#picture:hover {width: auto; height: auto;}   /* Set width/height to auto, will revert to default image size when hovered over */
</style>

While your image size would be set to whatever dimensions you would prefer it to be when it is moused over.

 

If you'd like I can try and come up with a JS-based solution as well, although I always preferred being able to do styling through just CSS if there is the possibility.

[galvin]

Cool, I will give this a shot later tonight when I get home from work, thanks for the suggestion!!!  I too prefer to use CSS whenever possible

[sharmalay]

Hey, no problem. One more thing, I forgot to add a doctype when I tested it out in IE7, and so it does work there and that's probably an indicator that it has full support in all modern browser versions.

[galvin]

Awesome, thanks so much!!!