Ændre funktion på DHTML menu
Hej små Eksperter, jeg har fundet og redigeret i en lille smart DHTML menu som kan ses her www.onlinedesign.dk/menu/menu.htm, den fungere fint men jeg ønsker at ændre i koden sådan at den expand'er sig selv når musen føres over, istedet for at man selv skal klikke på den for at expand, hvad skal jeg ændre for at kunne dette ?Det er sikkert noget med onmouseover= & onmouseout= ?
<head>
<style type="text/css">
<!--
#master {position:absolute; width: 200px; top: 10px; left: -120px; z-index:2; visibility:visible;}
#menu {position:absolute; width: 18px; top: 0px; left: 120px; z-index:5; visibility:visible;}
#top {position:absolute; width: 120px; top: 0px; left: 0px; z-index:5; visibility:visible;}
#screen {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;}
#screenlinks {position:absolute; width: 120px; top: 6px; left: 0px; z-index:5; visibility:visible;}
-->
</style>
<style type="text/css">
<!--
.NavJump {font-family: arial; font-size: 10pt; color: #666666; text-decoration: none;}
a:link.NavJump {color : #666666;}
a:visited.NavJump {color : #666666;}
a:active.NavJump {text-decoration: none; color: #C0C0C0;}
a:hover.NavJump {text-decoration: none; color: #C0C0C0;}
-->
</style>
<script language = "javascript">
<!--
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0
if(ie){
document.write('<style type="text/css">')
document.write("#screen {filter:Alpha(Opacity=30);}")
document.write("</style>")
}
if(ns){
document.write('<style type="text/css">')
document.write("#master {clip:rect(0,150,250,0);}")
document.write("</style>")
}
//-->
</script>
<script language = "javascript">
<!--
var ie = document.all ? 1 : 0
var ns = document.layers ? 1 : 0
var master = new Object("element")
master.curLeft = -120; master.curTop = 10;
master.gapLeft = 0; master.gapTop = 0;
master.timer = null;
function moveAlong(layerName, paceLeft, paceTop, fromLeft, fromTop){
clearTimeout(eval(layerName).timer)
if(eval(layerName).curLeft != fromLeft){
if((Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft)) < paceLeft){eval(layerName).curLeft = fromLeft}
else if(eval(layerName).curLeft < fromLeft){eval(layerName).curLeft = eval(layerName).curLeft + paceLeft}
else if(eval(layerName).curLeft > fromLeft){eval(layerName).curLeft = eval(layerName).curLeft - paceLeft}
if(ie){document.all[layerName].style.left = eval(layerName).curLeft}
if(ns){document[layerName].left = eval(layerName).curLeft}
}
if(eval(layerName).curTop != fromTop){
if((Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop)) < paceTop){eval(layerName).curTop = fromTop}
else if(eval(layerName).curTop < fromTop){eval(layerName).curTop = eval(layerName).curTop + paceTop}
else if(eval(layerName).curTop > fromTop){eval(layerName).curTop = eval(layerName).curTop - paceTop}
if(ie){document.all[layerName].style.top = eval(layerName).curTop}
if(ns){document[layerName].top = eval(layerName).curTop}
}
eval(layerName).timer=setTimeout('moveAlong("'+layerName+'",'+paceLeft+','+paceTop+','+fromLeft+','+fromTop+')',30)
}
function setPace(layerName, fromLeft, fromTop, motionSpeed){
eval(layerName).gapLeft = (Math.max(eval(layerName).curLeft, fromLeft) - Math.min(eval(layerName).curLeft, fromLeft))/motionSpeed
eval(layerName).gapTop = (Math.max(eval(layerName).curTop, fromTop) - Math.min(eval(layerName).curTop, fromTop))/motionSpeed
moveAlong(layerName, eval(layerName).gapLeft, eval(layerName).gapTop, fromLeft, fromTop)
}
var expandState = 0
function expand(){
if(expandState == 0){setPace("master", 0, 10, 10); if(ie){document.menutop.src = "images/menub.gif"}; expandState = 1;}
else{setPace("master", -120, 10, 10); if(ie){document.menutop.src = "images/menu.gif"}; expandState = 0;}
}
//-->
</script>
</head>
<div id="master">
<div id="menu">
<table border="0" width="18" cellspacing="0" cellpadding="0">
<tr><td width="100%"><a href="java script:expand()" onmouseover="this.blur()"><img name="menutop" border="0" src="images/menu.gif" width="18" height="70"></a></td></tr>
</table>
</div>
<div id="top">
<table border="0" width="120" cellspacing="0" cellpadding="0">
<tr><td width="100%"><img border="0" src="images/top.gif" width="120" height="6"></td></tr>
</table>
</div>
<div id="screen">
<table border="0" width="120" cellspacing="0" cellpadding="5">
<tr><td width="100%" bgcolor="#666666">
<table border="0" width="100%" bgcolor="#666666" cellspacing="0" cellpadding="0">
<tr><td width="100%">
<table border="0" width="100%" cellspacing="1" cellpadding="5">
<tr><td width="100%" bgcolor="#FFFFFF">
<font class="NavJump"><br></font><font class="NavJump"><br></font><font class="NavJump"><br></font><font class="NavJump"><br></font>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</div>
<div id="screenlinks">
<table border="0" width="120" cellspacing="0" cellpadding="5">
<tr><td width="100%">
<table border="0" width="100%" bgcolor="#666666" cellspacing="0" cellpadding="0">
<tr><td width="100%">
<table border="0" width="100%" cellspacing="1" cellpadding="5">
<tr><td width="100%" bgcolor="#FFFFFF">
<a href="http://www.onlinedesign.dk/scripts/forum/onlinedesign" class="NavJump"><b>Forum</b></a><br>
<a href="http://mail.onlinedesign.dk/" class="NavJump"><b>Mail</b></a><br>
<a href="#" class="NavJump"><b>Scripts</b></a><br>
<a href="#" class="NavJump"><b>Grafik</b></a><br>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</div>
</div>
<script language = "javascript">
<!--
if(ie){var sidemenu = document.all.master;}
if(ns){var sidemenu = document.master;}
function FixY(){
if(ie){sidemenu.style.top = document.body.scrollTop+10}
if(ns){sidemenu.top = window.pageYOffset+10}
}
setInterval("FixY()",100);
//-->
</script>
