How to open div on top of an image?

[ts2000abc]

I have a thumbnail image and i want to create a mouseover effect were small box (with text ”zoom” or ”click to enlarge”) opens on top of the thumbnail image. How is this effect created with javascript?

[Ken2k7]

Well it's not too hard to create it yourself. The zoom and click to enlarge can be just another DIV above the image that is set to display: block when mouseover and display: none when mouseout. The animation, depending on how you like your effects, you can utilize jQuery or better yet scriptaculous. But you can make a quickie yourself with little to no animation. Create a div at the bottom of the page (above </body>) and style it to center itself on the middle of the page. If you want, be more technical and give it a semi-dark transparent background like a lightbox or in this case a blackbox . Anyways, for each image, give it an attribute that you can reference it by. Like ID is good. When clicked, grab the ID of the image and put the image into the div you created. Then just change width and height when zoomed or enlarged, etc.