Image shown when mouse over text

**Vaonline** · 04-11-2012, 07:34 PM

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.

**keyboard1333** · 04-11-2012, 09:18 PM

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>

**Vaonline** · 04-12-2012, 07:27 PM

Thanks, ill try it later.

**keyboard1333** · 04-12-2012, 10:51 PM

Oh and another thought -
If you want to use this lots of times, put this bit

Code:

function toggleMe() {
var id = document.getElementById('Image1');
if(id.style.display == "block") {
id.style.display = "none";
} else {
id.style.display = "block";
}
}

in an external javascript file. It'll save you from having to write it out every page.

Thread: Image shown when mouse over text

Thread Tools

Search Thread

Image shown when mouse over text

Bookmarks

Bookmarks

Posting Permissions