Hallo,
da ich nach einigen Tagen ausprobieren so richtig verzweifelt bin, hoffe ich Ihr könnt mir helefn:
Habe ein Basis-Skript von dynamicdrive genutzt und auf meine Bedürfnisse umgeschrieben, soweit hat auch alles gut funktioniert. Dieses Menu funktioniert aber so, dass die Layer bei onmouseover und onmouseout offen bleiben. Erst bei click geht der zuletzt geöffnete layer wieder zu.
1)Im Moment wo ein layer offen ist, sieht man nicht die Links die sich unterdem Layer befinden. 2) Wenn man sich mit der Maus in das Fenster bewegt ohne auf einen anderen Link zu clicken, bleibt es einfach offen stehen.-
Ich möchte das es sich der letzt geöffnete layer bei Mouseout wieder schliesst. Hatte auch einen Befehl mouseout=hidemenu geschrieben, aber das lief völlig falsch, denn man hatte keine Zeit sich einen Link vom Layer auszuwählen, denn der Layer schloss sich sofort bei mouseout des jeweiligen Hauptlinks. Auch mit cleartimeout/settimeout kam ich nicht zurecht, vielleicht hab ich da auch was falsch gemacht. Ich möchte es auch gar nicht an einem Zeitintervall festmachen, das sich das Menu wieder schliesst. Onmouseout vom layer finde ich in diesem Menu am besten.
Das script sieht wie folgt aus:
//Drop down menu link- © Dynamic Drive (
http://www.dynamicdrive.com) //For full source code and 100's more DHTML scripts, visit
http://www.dynamicdrive.com //Credit MUST stay intact for use
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href=textildesign.htm>Textil_Design</a><br>'
menu1[1]='<a href=freie_kunst.htm>Kunst_Galerie</a><br>'
//Contents for menu 2
var menu2=new Array()
menu2[0]='<a href=referenzen.htm>textile_Referenzen</a><br>'
menu2[1]='<a href=biographie.htm>künstlerische_Biographie</a><br>'
//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href=bettwaesche.htm>Bettwäsche</a><br>'
menu3[1]='<a href=tischwaesche.htm>Tischwäsche</a><br>'
menu3[2]='<a href=serien_beispiele.htm>Serien_Beispiele</a><br>'
menu3[3]='<a href=kinderdessins.htm>Kinderdessins</a><br>'
menu3[4]='<a href=heimtextil_messe.htm>Warenpräsentation</a><br>'
//Contents for menu 4
var menu4=new Array()
menu4[0]='<a href=kontakt.htm>eMail</a><br>'
menu4[1]='<a href=
http://www.onlinewebservice6.de/...lt;/a><br>' //Contents for menu 5
var menu5=new Array()
menu5[0]='<a href=links.htm>Linkliste</a><br>'
menu5[1]='<a href=impressum.htm>Impressum</a><br>'
</script>
<style>
<!--
.wrap1 { position: relative }
.wrap2 { position: absolute }
#dropmenu0, #dropmenu1, #dropmenu2, #dropmenu3, #dropmenu4, #dropmenu5 { z-index: 100 }
-->
</style>
<title>Navigation3</title>
</head>
<body bgcolor="#333333" text="#CCCCCC" link="#C0C0C0" vlink="#999999" alink="#C0C0C0">
<br>
<script language="JavaScript1.2">
//reusable/////////////////////////////
//Drop down menu by
http://www.dynamicdrive.com var zindex=100
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
var opr=navigator.userAgent.indexOf("Opera")
function dropit(e,whichone){
curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id
if (window.themenu&&themenu.id!=curmenuID)
themenuStyle.visibility=ns4?"hide" : "hidden"
themenu=ns6? document.getElementById(whichone): eval(whichone)
themenuStyle=(ns6||ie4)? themenu.style : themenu
themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0
themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0
themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX
themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18
hiddenconst=(ns6||ie4)? "hidden" : "hide"
if (themenuStyle.visibility==hiddenconst){
themenuStyle.visibility=(ns6||ie4)? "visible" : "show"
themenuStyle.zIndex=zindex++
}
else
hidemenu()
return false
}
function hidemenu(){
if ((ie4||ns6)&&window.themenu)
themenuStyle.visibility="hidden"
else if (ns4)
themenu.visibility="hide"
}
if (ie4||ns6)
document.onclick=hidemenu
//reusable/////////////////////////////
</script>
<!----------Menu 1 starts here---------->
<ilayer>
<layer visibility=show>
<div class="wrap1" style="width: 51; height: 10">
<p style="line-height: 100%; margin-left: 8">
<span class="wrap2" onmouseover="dropit(event, 'dropmenu0');event.cancelBubble=true;return false" style="position: absolute; left: 8px; top: -2px; width: 48px"><b><img border="0" src="space_blindgif.gif" width="4" height="1"><font size="2" face="Tahoma"><a href="index.htm" onmouseout="if(ns4) return dropit(event, 'document.dropmenu0')">Home</a>
</font></b></span>
</div>
<p style="line-height: 100%; margin-left: 8"><font size="2" face="Tahoma"></font>
</layer>
</ilayer>
<!----------Menu 1 ends here---------->
<!----------Menu 2 starts here---------->
<ilayer>
<layer visibility=show>
<div class="wrap1" style="width: 88; height: 10">
<p style="line-height: 100%; margin-left: 8">
<span class="wrap2" onmouseover="dropit(event, 'dropmenu1');event.cancelBubble=true;return false" style="position: absolute; left: 8px; top: -2px; width: 89px"><b><img border="0" src="space_blindgif.gif" width="4" height="1"><font size="2" face="Tahoma"><a href="referenzen.htm" onmouseout="if(ns4) return dropit(event, 'document.dropmenu1')">Werdegang</a>
</font></b></span>
</div>
<p style="line-height: 100%; margin-left: 8"><font size="2" face="Tahoma">
</layer>
</ilayer>
</font>
<!----------Menu 2 ends here---------->
<!----------Menu 3 starts here---------->
<ilayer>
<layer visibility=show>
<div class="wrap1" style="width: 70; height: 10">
<p style="line-height: 100%; margin-left: 8">
<span class="wrap2" onmouseover="dropit(event, 'dropmenu2');event.cancelBubble=true;return false" style="position: absolute; left: 8px; top: -2px; width: 106px"><b><img border="0" src="space_blindgif.gif" width="4" height="1"><font size="2" face="Tahoma"><a href="textildesign.htm" onmouseout="if(ns4) return dropit(event, 'document.dropmenu2')">Textil_Design</a>
</font></b></span>
</div>
<p style="line-height: 100%; margin-left: 8"><font size="2" face="Tahoma"></font>
</layer>
</ilayer>
<!----------Menu 3 ends here---------->
<!----------Menu 4 starts here---------->
<ilayer>
<layer visibility=show>
<div class="wrap1" style="width: 130; height: 10">
<p style="line-height: 100%; margin-left: 8">
<span class="wrap2" onmouseover="dropit(event, 'dropmenu3');event.cancelBubble=true;return false" style="position: absolute; left: 8px; top: -2px; width: 70px"><b><img border="0" src="space_blindgif.gif" width="4" height="1"><font size="2" face="Tahoma"><a href="kontakt.htm" onmouseout="if(ns4) return dropit(event, 'document.dropmenu3')">Kontakt</a>
</font></b></span>
</div>
<p style="line-height: 100%; margin-left: 8"><font size="2" face="Tahoma">
</layer>
</ilayer>
</font>
<!----------Menu 4 ends here---------->
<!----------Menu 5 starts here---------->
<ilayer>
<layer visibility=show>
<div class="wrap1" style="width: 72; height: 10">
<p style="line-height: 100%; margin-left: 8">
<span class="wrap2" onmouseover="dropit(event, 'dropmenu4');event.cancelBubble=true;return false" style="position: absolute; left: 8px; top: -2px; width: 53px"><b><img border="0" src="space_blindgif.gif" width="4" height="1"><font size="2" face="Tahoma"><a href="links.htm" onmouseout="if(ns4) return dropit(event, 'document.dropmenu4')">Links</a>
</font></b></span>
</div>
<p style="line-height: 100%; margin-left: 8"><font size="2" face="Tahoma">
</layer>
</ilayer></font>
<!----------Menu 5 ends here---------->
<div id="dropmenu0" style="position: absolute; left: 2; top: 40; layer-background-color: #333333; background-color: #3F3F3F; width: 2; visibility: hidden; height: 2; border: 0px solid black; padding: 12px">
<font size="2" face="Tahoma">
<p style="line-height: 120%; margin-left: 2">
<script language="JavaScript1.2">
if (document.all)
dropmenu0.style.padding="12px"
for (i=0;i<menu1.length;i++)
document.write(menu1
)
</script>
</font>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu
}
</script>
<div id="dropmenu1" style="position: absolute; left: 2; top: 40; layer-background-color: #333333; background-color: #3F3F3F; width: 0; visibility: hidden; height: 2; border: 0px solid black; padding: 12px">
<font size="2" face="Tahoma">
<p style="line-height: 120%; margin-left: 2">
<script language="JavaScript1.2">
if (document.all)
dropmenu1.style.padding="12px"
for (i=0;i<menu2.length;i++)
document.write(menu2)
</script>
</font>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu
}
</script>
<div id="dropmenu2" style="position: absolute; left: 2; top: 40; layer-background-color: #333333; background-color: #3F3F3F; width: 0; visibility: hidden; height: 2; border: 0px solid black; padding: 12px">
<font size="2" face="Tahoma">
<p style="line-height: 120%; margin-left: 2">
<script language="JavaScript1.2">
if (document.all)
dropmenu2.style.padding="11px"
for (i=0;i<menu3.length;i++)
document.write(menu3)
</script>
</font>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu
}
</script>
<div id="dropmenu3" style="position: absolute; left: 2; top: 40; layer-background-color: #333333; background-color: #3F3F3F; width: 0; visibility: hidden; height: 2; border: 0px solid black;padding: 12px">
<font size="2" face="Tahoma">
<p style="line-height: 120%; margin-left: 2">
<script language="JavaScript1.2">
if (document.all)
dropmenu3.style.padding="11px"
for (i=0;i<menu4.length;i++)
document.write(menu4)
</script>
</font>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK)
document.dropmenu3.onclick=hidemenu
}
</script>
<div id="dropmenu4" style="position: absolute; left: 2; top: 40; layer-background-color: #333333; background-color: #3F3F3F; width: 2; visibility: hidden; height: 2; border: 0px solid black; padding: 12px">
<font size="2" face="Tahoma">
<p style="line-height: 120%; margin-left: 2">
<script language="JavaScript1.2">
if (document.all)
dropmenu4.style.padding="11px"
for (i=0;i<menu5.length;i++)
document.write(menu5)
</script>
</font>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu4.captureEvents(Event.CLICK)
document.dropmenu4.onclick=hidemenu
}
</script>
</body>
Hat bitte irgend jemand rat wie ich das gut lösen kann? Bitte um Hilfe. Bin echt verzweifelt.
Susanne G.