larger image on mouse over

[chiprivers]

Could somebody help me with how to display a larger version of an image when the mouse hovers over the thumbnail?

 

I have an index page displaying some thumbnail images.  I have a slightly larger version of the image saved which I would like to be displayed momentarily as the mouse hovers over the thumb.

[JJohnsenDK]

you should use javascript for that.... <img src="your normale image" onmouseover="your bigger image" onmouseout="your normale image"

[chiprivers]

you should use javascript for that.... <img src="your normale image" onmouseover="your bigger image" onmouseout="your normale image"

 

In the past I have used this basic javascript to do an image change on mouseover, but I need to do here is have the larger image float over the top of the page without effecting the rest of the display.  If I change the thumb image to the bigger image the rest of the display is going to distort.

[JJohnsenDK]

hmm.. i dont understand the part with the "float over the top of the page".

 

Do you mean if you use the mouseover to make the image bigger the rest of the webpage will "jump" around to make room for the "new" larger image?

 

if you do it sounds like a job for good old AJAX...

[chiprivers]

hmm.. i dont understand the part with the "float over the top of the page".

 

Do you mean if you use the mouseover to make the image bigger the rest of the webpage will "jump" around to make room for the "new" larger image?

 

if you do it sounds like a job for good old AJAX...

 

I think I can do it using CSS?! possibly have the larger versions of the images scripted into the page already and position them using CSS in the correct position but somehow make them invisible other than when the mouse is over the correct thumbnail.  ANybody have any idea what I'm talking about and exactly how to doit?

[JJohnsenDK]

yes it can easily be done with CSS, but then you cant get the floating effect you are talking about, and you have to, ask you point out your self, fix the size of the larger image, which means you cant have the images close right next to each ohter.

 

but you shall use the hover function in CSS

 

<div class="image" /></div>

 

STYLESHEET:

 

.image{

  height: 150px;

  width: 150px;

  backgroundimage: src('blabla.jpg');

}

 

.image hover{

  height: 200px;

  width: 200px;

  backgroundimage: src('blabla.jpg');

}

 

 

this should do the work, but as i wrote, it doesnt make the prettiest result. You have to do that with AJAX

[jellis]

Don't use CSS in place of Javascript.  Use Javascript to control the CSS... the hover pseudo-class is renowned to be highly ineffective in IE.

 

If you just control the "display" class (set to "none" in its native state) and then switch it with Javascript on mouse over.