Horst: Funktion zum nacheinander abfolgenden Anzeigen von DIVs

Beitrag lesen

SELF-Forum

Funktion zum nacheinander abfolgenden Anzeigen von DIVs

Horst
– Informationen zu den Bewertungsregeln

Erst einmal hallo alle miteinander,

ich hab gestern mit Javascript angefangen zu arbeiten und stehe schon vor einem Problem:

Bei einem Mouseover über einen Menu-Button sollen sich mehrere Untermenubuttons nacheinander öffnen (,dass heißt immer nach einer kurzen Verzögerung das nächste usw.) bis alle angezeigt werden.

Meine Idee war sofort, es mit einem window.setTimeout zu bewerkstelligen. Eine Funktion, in der alle Öffnungsvorgänge direkt unter einander stehen, brachte das Ergebnis, dass sofort das erste und nach der eigegebenen Verzögerung sich alle auf einmal öffneten.

Deshalb kam ich auf die Idee mit den Abfragen:

  
function PopUp () {  
var a = document.getElementById('band').style.display;  
var b = document.getElementById('videos').style.display;  
var c = document.getElementById('pics').style.display;  
var d = document.getElementById('links').style.display;  
var e = document.getElementById('sign_in').style.display;  
var f = document.getElementById('gigs').style.display;  
  
if (a == 'none')  
{  
document.getElementById('band').style.display='';  
}  
else  
{  
PopUp () ;  
}  
if (document.getElementById('band').style.display == '')  
{  
window.setTimeout("document.getElementById('videos').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (document.getElementById('videos').style.display == '')  
{  
window.setTimeout("document.getElementById('pics').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (c == '')  
{  
window.setTimeout("document.getElementById('links').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (d == '')  
{  
window.setTimeout("document.getElementById('sign_in').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
if (e == '')  
{  
window.setTimeout("document.getElementById('gigs').style.display='';", 800) ;  
}  
else  
{  
PopUp () ;  
}  
}

und der html code

  
<body>  
<div class="menu" onMouseover="PopUp();">  
<img src="menu.jpg"></img>  
</div>  
<div id="band"  style="display: none; width: 80; height: 80; top:0;  left: 0; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="gigs"  style="display: none; width: 80; height: 80; top:0;  left: 400; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="sign_in"  style="display: none; width: 80; height: 80; top:0;  left: 320; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="links"  style="display: none; width: 80; height: 80; top:0;  left: 240; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="pics"  style="display: none; width: 80; height: 80; top:0; left: 160; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
<div id="videos"  style="display: none; width: 80; height: 80; top:0; left: 80; position: absolute;">  
<img src="k.jpg"></img>  
</div>  
</body>

In Firefox klappt diese Version, bis auf das erste Untermenu überhaupt nicht und der IE gibt mir nur Fehlermeldungen.

Wird wahrscheinlich nur ein formaler Fehler sein und hoffentlich leicht zu beheben.

Vielen Dank schon mal für eure Ideen.

Beitrag melden
–
Informationen zu den Bewertungsregeln