A few words of thanks would be greatly appreciated.

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:

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

A few words of thanks would be greatly appreciated.

Ask a question
Jean-François Pillou

CCM is a leading international tech website. Our content is written in collaboration with IT experts, under the direction of Jeff Pillou, founder of CCM.net. CCM reaches more than 50 million unique visitors per month and is available in 11 languages.

Learn more about the CCM team

Published by . Latest update on 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 (https://ccm.net/).