Javascript - Display a div upon mouse over

October 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:

<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';
<style type="text/css"><!--
	div {visibility:hidden}

	<li onMouseOver="'div1')" onMouseOut="div.hide('div1')">lien 1</li>
	<li onMouseOver="'div2')" onMouseOut="div.hide('div2')">lien 2</li>
	<li onMouseOver="'div3')" onMouseOut="div.hide('div3')">lien 3</li>
<div id="div1">
	<img src="" alt="image 1" />
<div id="div2">
	<img src="" alt="image 2" />
<div id="div3">
	<img src="" alt="image 3" />

Thanks to Groarh for this tip.

Related :

This document entitled « Javascript - Display a div upon mouse over » from CCM ( 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.