Parin Posted September 14, 2009 Posted September 14, 2009 can i please know how to create a pop up image which just pops up when i mouseover it and when i mouseout it just disappers can i please know the code? Quote
Mokothemonkey Posted September 14, 2009 Posted September 14, 2009 can i please know how to create a pop up image which just pops up when i mouseover it and when i mouseout it just disappers can i please know the code? Have you tried The Oracle? Quote
Wizard Posted September 14, 2009 Posted September 14, 2009 can i please know how to create a pop up image which just pops up when i mouseover it and when i mouseout it just disappers can i please know the code? Have you tried The Oracle? Don't steal my bit. Quote
Byron Posted September 15, 2009 Posted September 15, 2009 Have you tried The Oracle? Don't steal my bit. Imitation is the most sincere form of flattery. Quote
MrFish Posted October 5, 2009 Posted October 5, 2009 For what you are asking you are going to need to use javascript. If you knew how to use javascript you probably wouldn't be asking this question so while you go to w3schools and read up on it I'll just give you the steps to do this. The html: <body> <div id="wrapper"> <img src="image.jpg" id="image" onMouseOver="displayImage()" onMouseOut="removeImage()"> <br /> Hover To Enlarge </div> <div id="hoverImage"> <img src="image.jpg"> </div> </body> The java script: <script type="text/javascript"> function displayImage(){ var button = document.getElementById("image"); var image = document.getElementById("hoverImage").style; left = button.offsetLeft + 100; top = button.offsetTop; top = top + 100 + "px"; image.visibility = "visible"; image.top = top; image.left = left; } function removeImage(){ var image = document.getElementById("hoverImage").style; image.visibility = "hidden"; } </script> The CSS: #image{ width: 100px; height: 100px; cursor: pointer; } #hoverImage{ position: absolute; top: 0px; left: 0px; z-index: 2; visibility: hidden; } #wrapper{ width: 100px; height: 100px; margin: 200px auto; text-align: center; font-size: 10px; color: #555; } I don't know how you want it to look but it will enlarge it and place it to the bottom right of the original image. Nothing fancy but you can go from there. Full code; Copy can paste this in notepad, save it as an html file anywhere to your computer, and place an image (larger then 100px by 100px) in the same directory with the name image.jpg . <html> <head> <style type="text/css"> #image{ width: 100px; height: 100px; cursor: pointer; } #hoverImage{ position: absolute; top: 0px; left: 0px; z-index: 2; visibility: hidden; } #wrapper{ width: 100px; height: 100px; margin: 200px auto; text-align: center; font-size: 10px; color: #555; } </style> <script type="text/javascript"> function displayImage(){ var button = document.getElementById("image"); var image = document.getElementById("hoverImage").style; left = button.offsetLeft + 100; top = button.offsetTop; top = top + 100 + "px"; image.visibility = "visible"; image.top = top; image.left = left; } function removeImage(){ var image = document.getElementById("hoverImage").style; image.visibility = "hidden"; } </script> </head> <body> <div id="wrapper"> <img src="image.jpg" id="image" onMouseOver="displayImage()" onMouseOut="removeImage()"> <br /> Hover To Enlarge </div> <div id="hoverImage"> <img src="image.jpg"> </div> </body> </html> Image I used: http://i.zdnet.com/blogs/firefox_.jpg Preview: Haha, by the way. You can see I have this site bookmarked, I'm waiting to try and get hosting Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.