Javascript - Display a div upon mouse over

June 2017



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


Published by aakai1056. Latest update on August 16, 2011 at 10:08 AM by aakai1056.
This document, titled "Javascript - Display a div upon mouse over," is available under the Creative Commons license. Any copy, reuse, or modification of the content should be sufficiently credited to CCM (ccm.net).