Javascript - Display a div upon mouse over

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

<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.


Published 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 (