Hallo!
Ich habe ein JavaScript-Problem - ich kann mit meinem Skript zwar divs erscheinen lassen, aber sie verschwinden dann nicht mehr. Zur Vorinformation: Skript ist momentan nur mit MSIE 6.0 getestet.
Würde mich freuen, wenn ihr vielleicht einen Tipp für mich habt, was ich falsch gemacht habe bzw. wie man das besser lösen könnte. Bitte Entschuldigung für den langen Quellcode, habe ihn zwar gekürzt, trotzdem ist noch einiges übriggeblieben:
Das Skript:
Funktion menu zeigt jeweils das gewünscht menu-div an und blendet die anderen aus.
Funktion clean: alle divs verstecken
Funktion submenu: Im Div-Menu eingebundene sub-divs anzeigen.
<script language="JavaScript" type="text/javascript">
<!--
function menu (i)
{
switch(i)
{
case 1:
{
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
{
window.document.menu1.style.left = document.images[0].offsetLeft+20;
window.document.menu1.style.top = document.images[0].offsetTop+50;
window.document.menu1.visibility="show";
window.document.menu2.visibility="hide";
window.document.sub21.visibility="hide";
window.document.sub22.visibility="hide";
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[0].style.left=document.images[0].offsetLeft+20;
layers[0].style.top=document.images[0].offsetTop+50;
layers[0].style.visibility='visible';
layers[4].style.visibility='hidden';
layers[5].style.visibility='hidden';
layers[6].style.visibility='hidden';
return;
}
case 2:
{
hier stehen genau die umgekehrten Zuweisungen wie in case 1, menu1 mit allen darin enthaltenen Layern wird versteckt und menu2 angezeigt.
}
}
}
function clean ()
{
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
{
window.document.menu1.visibility="hide";
window.document.sub11.visibility="hide";
usw ... alles wird versteckt
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[0].style.visibility='hidden';
layers[1].style.visibility='hidden';
usw ... alles wird versteckt
return;
}
function submenu (i)
{
switch(i)
{
case 11:
{
window.clearInterval("submenu(11)");
if ((navigator.appName=='Netscape') && (navigator.appVersion.charAt(0)<'5'))
{
window.document.sub11.visibility="show";
return;
}
if (navigator.appVersion.charAt (0)<'5')
{
var layers=document.all.tags ("div");
}
else {
var layers=document.getElementsByTagName("div");
}
layers[1].style.visibility='visible';
return;
}
... analog für die anderen cases
}}
//-->
</script>
HTML-Teil:
Die Div-Menüs mit eingebundenen sub-divs:
<div id="menu1" class="menu" style="position:absolute;left:0px;top:0px;z-index:0;visibility:hidden" onmouseover="menu(1);submenu(11);submenu(12)" onmouseout="clean()">
<div id="sub11" class="submenu" style="position:relative;top:0px;left:10px;visibility:hidden">Information</div>
<div id="sub12" class="submenu" style="position:relative;top:0px;left:25px;visibility:hidden">Programmauszug</div>
</div>
... analog dazu menu2 mit den sub-divs.
Der Aufruf - korrespondierendes menu-div anzeigen, submenus zeitversetzt anzeigen und die anderen menu-divs verstecken.
<a href="#" onmouseover="menu(1);setInterval('submenu(11)',150);setInterval('submenu(12)',300)" onmouseout="clean()"><img src="b_red_pro.gif" alt="" border=0/></a>
… analoger Aufruf der anderen Layer.
Wie gesagt, die Anzeige, das Erscheinen klappt wunderbar. Allerdings lassen sich die divs nicht mehr verstecken. Weder bei mouseover auf ein anderes Bild noch bei mouseout beim entsprechenden div.
Ich hoffe, ich habe mich halbwegs verständlich ausgedrückt. Danke im Voraus für jede Hilfe.
Schöne Grüße
Sabine