[Javascript ] Display a div upon mouse over
Suppose that we have a div containing the images that are masked when the page loads and upon mouse over on a link, the div becomes visible (when the cursor is not over the link, the div becomes invisible).
Here's a code example:
html>
<head>
<title>test pijaku</title>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
<style type="text/css"><!--
div {visibility:hidden}
--></style>
</head>
<body>
<ul>
<li onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')">lien 1</li>
<li onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')">lien 2</li>
<li onMouseOver="div.show('div3')" onMouseOut="div.hide('div3')">lien 3</li>
</ul>
<div id="div1">
<img src="" alt="image 1" />
</div>
<div id="div2">
<img src="" alt="image 2" />
</div>
<div id="div3">
<img src="" alt="image 3" />
</div>
</body>
</html>
Thanks to
Groarh for this tip.
See also
Knowledge communities.
