Hi i try to make simple DHTML menu but i have any little problem :-(
The problem is..... i hide the body of the menu when mouse is (normaly) out
of the body...but.... the event onmouseout is generated when the mouse out
from one of the entry of my menu......
someone can help me to understand why ?????
look this is my code:
<html>
<head>
<title>Docume nt sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
..ProMenu{
position:absolu te;
left:100px;
top:100px;
width:200px;
height:66px;
z-index: 50;
visibility: visible;
}
..ProMenuHead {
position:relati ve;
left:0px;
top:1px;
width:200px;
height:22px;
z-index: 50;
visibility: visible;
background-color: #CCCCCC;
}
..ProMenuBody {
position:absolu te;
background-color: #885599;
left:100px;
top:124px;
width:200;
padding-left:4;
padding-right:4;
padding-top:1;
padding-bottom:1
visibility;
z-index: 51;
visibility: hidden;
font-family: arial;
font-size: 12;
color: #ffffff;
z-index: 30;
}
..ProMenuBodyMa sk {
position:absolu te;
background-color: #885599;
left:100-5;
top:122-22;
width:200+10;
height:400;
visibility:hidd en;
font-family: arial;
font-size: 12;
color: #ffffff;
z-index: 48;
}
a.MenuPro
{
color:#ffffff;
text-decoration:none ;
font-weight:bold;
}
a.MenuPro:hover
{
color:#ffffff;
text-decoration:unde rline;
font-weight:bold;
}
</style>
<script language="JavaS cript1.2">
function Affiche(id) {
if (document.getEl ementById) {
document.getEle mentById(id).st yle.visibility= "visible";
} else if (document.all) {
document.all[id].style.visibili ty="visible";
} else if (document.layer s) {
document.layers[id].visibility="vi sible";
} }
function Masque(id) {
if (document.getEl ementById) {
document.getEle mentById(id).st yle.visibility= "hidden";
} else if (document.all) {
document.all[id].style.visibili ty="hidden";
} else if (document.layer s) {
document.layers[id].visibility="hi dden";
} }
</script>
<script language="JavaS cript" type="text/JavaScript">
<!--
function MM_reloadPage(i nit) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Net scape")&&(parse Int(appVersion) ==4)) {
document.MM_pgW =innerWidth; document.MM_pgH =innerHeight;
onresize=MM_rel oadPage; }}
else if (innerWidth!=do cument.MM_pgW || innerHeight!=do cument.MM_pgH)
location.reload ();
}
MM_reloadPage(t rue);
//-->
</script>
</head>
<body>
<div id="Menu" class="ProMenu" >
<div id="Head" class="ProMenuH ead" onMouseOver="Af fiche('MBody'); ">
<div align="center"> <strong><font
color="#FFFFFF" >MENU1</font></strong></div>
</div>
</div>
<div id="MBody" class="ProMenuB ody" onMouseOut="Mas que('MBody');">
<p>
<a href="#" class="MenuPro" >truc</a><br>
<a href="#" class="MenuPro" >chose</a>
</p>
</div>
</body>
</html>
The problem is..... i hide the body of the menu when mouse is (normaly) out
of the body...but.... the event onmouseout is generated when the mouse out
from one of the entry of my menu......
someone can help me to understand why ?????
look this is my code:
<html>
<head>
<title>Docume nt sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
..ProMenu{
position:absolu te;
left:100px;
top:100px;
width:200px;
height:66px;
z-index: 50;
visibility: visible;
}
..ProMenuHead {
position:relati ve;
left:0px;
top:1px;
width:200px;
height:22px;
z-index: 50;
visibility: visible;
background-color: #CCCCCC;
}
..ProMenuBody {
position:absolu te;
background-color: #885599;
left:100px;
top:124px;
width:200;
padding-left:4;
padding-right:4;
padding-top:1;
padding-bottom:1
visibility;
z-index: 51;
visibility: hidden;
font-family: arial;
font-size: 12;
color: #ffffff;
z-index: 30;
}
..ProMenuBodyMa sk {
position:absolu te;
background-color: #885599;
left:100-5;
top:122-22;
width:200+10;
height:400;
visibility:hidd en;
font-family: arial;
font-size: 12;
color: #ffffff;
z-index: 48;
}
a.MenuPro
{
color:#ffffff;
text-decoration:none ;
font-weight:bold;
}
a.MenuPro:hover
{
color:#ffffff;
text-decoration:unde rline;
font-weight:bold;
}
</style>
<script language="JavaS cript1.2">
function Affiche(id) {
if (document.getEl ementById) {
document.getEle mentById(id).st yle.visibility= "visible";
} else if (document.all) {
document.all[id].style.visibili ty="visible";
} else if (document.layer s) {
document.layers[id].visibility="vi sible";
} }
function Masque(id) {
if (document.getEl ementById) {
document.getEle mentById(id).st yle.visibility= "hidden";
} else if (document.all) {
document.all[id].style.visibili ty="hidden";
} else if (document.layer s) {
document.layers[id].visibility="hi dden";
} }
</script>
<script language="JavaS cript" type="text/JavaScript">
<!--
function MM_reloadPage(i nit) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Net scape")&&(parse Int(appVersion) ==4)) {
document.MM_pgW =innerWidth; document.MM_pgH =innerHeight;
onresize=MM_rel oadPage; }}
else if (innerWidth!=do cument.MM_pgW || innerHeight!=do cument.MM_pgH)
location.reload ();
}
MM_reloadPage(t rue);
//-->
</script>
</head>
<body>
<div id="Menu" class="ProMenu" >
<div id="Head" class="ProMenuH ead" onMouseOver="Af fiche('MBody'); ">
<div align="center"> <strong><font
color="#FFFFFF" >MENU1</font></strong></div>
</div>
</div>
<div id="MBody" class="ProMenuB ody" onMouseOut="Mas que('MBody');">
<p>
<a href="#" class="MenuPro" >truc</a><br>
<a href="#" class="MenuPro" >chose</a>
</p>
</div>
</body>
</html>
Comment