Javascript - Display a div upon mouse over

December 2016



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.

Related :

This document entitled « Javascript - Display a div upon mouse over » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.