Forum Moderators: not2easy
I have several images on my page but i want only one of these images to enlarge on mouse over.
Could someone please tell me the code to use for this.
Thanks
One problem with this method is it has to scale the image one way or another. You're either blowing up a small image (stupid idea), or you have a large image, but scaled down via the web browser. What's the problem with that? web browser scaling doesn't anti-alias or use any filtering, so the smaller image may not look the best quality (a bit pixely and jagged)
A popular method to do this is with javascript. It really depends what you're using it for before I could suggest a certain type of pre-written javascript.
[edited by: Xapti at 6:45 pm (utc) on June 19, 2007]
All you need to do is img:hover{new size definition}, but I'm not sure if IE supports img:hover.
Or you could set a background image on an anchor and use a:hover to either load another image, or 'move the background' so the bigger image comes into view. It would then work in IE6 as well. Although your anchor would need to be the size of your bigger image!?
But as others have suggested, JavaScript may be preferable.
I now use it extensively, somewhat modified, for JS-free lightbox popups of bigger thumbnails.
Rgds
Damon
where?
Look at the (really nice, CSS-only) Hoverbox code and tutorial to see if it contains some elements that you can use.I now use it extensively, somewhat modified, for JS-free lightbox popups of bigger thumbnails.
Rgds
Damon
And how could you do a lightbox without JS? get rid of the fade effect, and have it only do the effect on hover or what?
and sorry about this, but I had this lined up for posting earlier but PC "unexpectedly quit" so it's a bit out of sync with rest of posts..
the effect can be done a few ways,
javascript "popups" as mentioned (e.g. lightbox)
CSS - img:hover would be nice and indeed IE7 does support that but IE6 and below don't so it's unusable for now without some sort of script to effect hover on images (half in half solution)
However an image is an inline element and can be nested inside an <a>nchor element and <a>nchors support hover, active and focus so you can get it to work using the link states. You can simply get it to work on hover but I sometimes find that to be jagged so would add the active/focus states too you can then make the larger image stay put on click/focus although not persistent.
positioning and jumping content might be an issue, but if I show you two ways (very basic) that it can be done perhaps you could let us know if any of them are close to what you'd like to achieve or if you like the smoother AJAX, Javascript effect
I've done some sample code showing two examples, the first uses two images and although I've just used the same image in the code, the theory behind this is that you would have 2 x optimized images of different sizes thumbnail and enlarged. the second just stretches one image.
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
.gallery {width: 500px; text-align: center; margin: 0 auto; background: #eee;}
img, a {display: block; margin: 0 auto;}
a img {border: 0;}/** 1st sample - using two images - one small one large**/
/* size the links to hold the image dependant on link state */
a.ex1 {height: 56px;}
a.ex1:hover, a.ex1:focus, a.ex1:active {height: 224px;}
a.ex1 img.si {display: block; width: 109px; height: 56px;} /* si = small image */
a.ex1 img.li {display: none; width: 436px; height: 224px;} /* li = large image */a.ex1:hover img.si, a.ex1:focus img.si, a.ex1:active img.si {
display: none; /* hide the small image on hover/active/focus */
}
a.ex1:hover img.li, a.ex1:focus img.li, a.ex1:active img.li {
display: block; /* display the large image on hover/active/focus */
}/** 2nd sample - using one image - resizing only **/
/* size the links to hold the image dependant on link state */
a.ex2 {height: 56px;}
a.ex2:hover, a.ex2:focus, a.ex2:active {height: 224px;}
a.ex2 img {width: 109px; height: 56px;}
a.ex2:hover img, a.ex2:focus img, a.ex2:active img {width: 436px; height: 224px;}
</style>
</head>
<body>
<div class="gallery">
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="#" width="109" height="56" />
<a href="#o" class="ex1">
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="hover or click for larger image" class="si" />
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="click outside image to return to small size" class="li" />
</a>
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="#" width="109" height="56" />
<hr />
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="#" width="109" height="56" />
<a href="#o" class="ex2">
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="#" />
</a>
<img src="http://showcase.netins.net/web/phdss/WebmasterWorldgfx/dlogo.png" alt="#" width="109" height="56" />
</div>
</body>
</html>
