ts2000abc Posted April 30, 2009 Share Posted April 30, 2009 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? Link to comment https://forums.phpfreaks.com/topic/156230-how-to-open-div-on-top-of-an-image/ Share on other sites More sharing options...
Ken2k7 Posted April 30, 2009 Share Posted April 30, 2009 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. Link to comment https://forums.phpfreaks.com/topic/156230-how-to-open-div-on-top-of-an-image/#findComment-822599 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.