Printable View
I need this: when i put the mouse over a text a image gets shown like "pop" and disappears when the mouse is not over the text anymore.
I already have searched this on the forum and i found some codes but i need a smaller code because i may use it like 100 times on a page and i want to make it simply.
Thanks.
Code:<html>
<head>
<script type="text/javascript">
function toggleMe() {
var id = document.getElementById('Image1');
if(id.style.display == "block") {
id.style.display = "none";
} else {
id.style.display = "block";
}
}
</script>
</head>
<body>
<div onmouseover="toggleMe()" onmouseout="toggleMe()">
Some Text
</div>
<img src="IMAGE URL" alt="IMAGE ALT" id="Image1" style="display:none;"/>
</body>
</html>
Thanks, ill try it later.
Oh and another thought -
If you want to use this lots of times, put this bit
in an external javascript file. It'll save you from having to write it out every page.Code:function toggleMe() {
var id = document.getElementById('Image1');
if(id.style.display == "block") {
id.style.display = "none";
} else {
id.style.display = "block";
}
}
Hello, I have used the code to setup image popup and it workes fine, thank you, but I cannot get it to work on a second link, tries to open the first link up. Many thanks
Firstly, the reason why the sample script only works on one image is that the function is specifically referencing one image by its unique id in the first line. That's easily changed, however, there are other problems or points to consider/clarify before proceeding.
1 - This thread is from 3 years ago so if you're copying this setup, you will now run in to problems in touch devices that do not support the onmouseover and onmouseout events. I expect the script will fail on keyboard navigation too. A more modern and future-friendly approach is now necessary to ensure that your content is accessible to your visitors.
2 - You say that you're using this script on links (anchor tags)? Does that mean that you're doubling-up on actions? i.e - you're using the mouse/hover to reveal an image but then a click takes the user to another page Or performs another action? Again, this combo won't work on touch devices and probably not for keyboard users either - they'll bypass any image and go straight to their destination. If this is the case, be sure that the image isn't critical to the action the link performs (such as checking a product before committing to buy) to avoid a user-UNfriendly experience.
3 - You say you've used this code to create a popup which, contrary to question 2, could mean that the only action of the link tag is to reveal the image. If this is the case, I would recommend looking at other possibilities/methods of revealing your image, such as a dedicated modal popup or light box. Creating an intuitive and usable web interface is easier when you work *with* user expectations -- using patterns or behaviours that have been learned from their experiences elsewhere on the web -- and click/tap activated modal popups are widely used so they do a fab job of that, AND of encouraging user focus on to the image in the foreground. Conversely, popping up/revealing an image *within* the web page body can be difficult for users to notice on mobile devices because the context of their actions is confined to such a small area. It depends what you're doing but the old script above probably isn't great in modern contexts.
If what you're wanting is a simple modal popup image, maybe you can use this http://fofwebdesign.co.uk/template/_...odal-popup.htm
If you need any further help, we'll need to see your page, and get more information, so that we can advise the best course of action.