Need Images to maximize on mouseover in HTML pages

Question

I m have thumbnail images in a table and on mouseover the image i should get as blow up and on mouseout it should be normal thumbnail. and i even need to navigate on clicking the Blowup image. plz guide me with the code of how to do it using javascript or using CSS

I need some thing as in this website : link text

Answer 1

Have a look at the jQuery Plugins, you could probably configure the ThickBox plugin?

Answer 2

Never done it myself but this tutorial/demo might be a good starting point.

Answer 3

Or a pure CSS implementation, doesn't work on IE6 though. CSS Light Box

Answer 4

question: do you have two pics? One for thumbnail one for enlarged pic? or only one image that changing size? do u want it gradually maximize or instantly become large?

For 1st case, just do:

function mouseOverFun() {
document.getElementById('imageName').src = "largeImage.jpg";
}  // just do the reverse for mouseOut event.

for 2nd case, if it enlarge gradually, look at jQuery. if not, just change the element size.

Answer 5

jQuery, or any other Javascript library has a host of things you could use to make a fancy gallery.

Try this site:

http://flowplayer.org/tools/index.html

Take a look at the demos pages; excellent ideas for what you're looking for.