nicht angemeldet
internet explorer: problem mit onmouseover
Hallo!
ich habe ein Problem mit einem dynamischen Menü. Funktioniert im MozillaFirefox einwandfrei, im IE6 will's nicht so wie ich will... (wundert mich nach dem, was ich im Netz zum IE und dem Einhalten von Standards so gefunden habe nicht ;) )
Ich habe eine Menü-Ebene mit Bildern als Buttons angelegt, Untermenüs erscheinen per onmouseover. Die Untermenüs überdecken das Menü teilweise. Jedes Bild steckt zwecks absoluter Positionierung in einem DIV. Als zweite Menü-Ebene habe ich wieder Bilder in DIVs zur Positionierung. Die Untermenü-DIVs stecken noch einmal in einem DIV-Container mit transparentem Hintergrund, der zum einen wieder der Positionierung dient, zum anderen stellt er einen Rahmen bereit, damit das Untermenü nicht sofort verschwindet, wenn man mal ein bisschen mit der Maus abrutscht.
Ansehen kann man sich das ganze unter http://userpage.chemie.fu-berlin.de/~chrbecke/elli/menu.htm
Das Problem liegt bei den DIVs für das Untermenü: im Firefox dringt die Maus nicht durch diese DIVs hindurch, so wie ich es mir wünsche. D. h., wenn das Untermenü angezeigt wird, tut sich auch dann in der ersten Menü-Ebene nix, wenn man mit der Maus auf der Untermenü-Ebene über die darunter (z-index!) liegenden Menü-Buttons fährt. Im IE6 dringt die Maus durch die Untermenü-Ebene hindurch. Dadurch verschwindet das Untermenü, sobald man mit der Maus über einen darunterliegenden Menübutton der ersten Ebene kommt.
Die Menüs funktionieren auch im IE einwandfrei, wenn ich für das Container-DIV eine Hintergrundfarbe angebe. Allerdings brauche ich den transparenten Hintergrund.
Weiss jemand Rat, wie ich das Ding im IE zum Laufen kriege?
Danke schon mal im Voraus...
Chris
Der Quellcode (nur der Ausschnitt aus dem Menü, den man auch unter der genannten URL in Aktion sehen kann...)
--- menu.css ------------------------------------------------- body {background-color: #80B0B3; } div.menuentry { position: absolute; left: 55px; z-index: 1; } div.smenuentry { margin-bottom: 1px; } div.smenu_frame { padding: 10px; border: solid 2px black; position: absolute; left: 10px; z-index: 2; visibility: hidden; }
--- menu.htm -------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <link rel="stylesheet" type="text/css" href="menu.css"> <script language="javascript" type="text/javascript"> // <!-- /* menu entry 0 */ n_button_0 = new Image(); n_button_0.src = "menue/normal/album.jpg"; a_button_0 = new Image(); a_button_0.src = "menue/active/album2.jpg";
/* menu entry 1 */ n_button_1 = new Image(); n_button_1.src = "menue/normal/singles.jpg"; a_button_1 = new Image(); a_button_1.src = "menue/active/singles2.jpg";
/* menu entry 2 */ n_button_2 = new Image(); n_button_2.src = "menue/normal/sampler.jpg"; a_button_2 = new Image(); a_button_2.src = "menue/active/sampler2.jpg";
/* menu entry 3 */ n_button_3 = new Image(); n_button_3.src = "menue/normal/bestseller.jpg"; a_button_3 = new Image(); a_button_3.src = "menue/active/bestseller2.jpg";
/* submenu of menu 3 */ n_sbutton_3_0 = new Image(); n_sbutton_3_0.src = "submenue/normal/hal.gif"; a_sbutton_3_0 = new Image(); a_sbutton_3_0.src = "submenue/normal/hal.gif"; n_sbutton_3_1 = new Image(); n_sbutton_3_1.src = "submenue/normal/stills.gif"; a_sbutton_3_1 = new Image(); a_sbutton_3_1.src = "submenue/normal/stills.gif"; n_sbutton_3_2 = new Image(); n_sbutton_3_2.src = "submenue/normal/weevil.gif"; a_sbutton_3_2 = new Image(); a_sbutton_3_2.src = "submenue/active/weevil2.gif"; n_sbutton_3_3 = new Image(); n_sbutton_3_3.src = "submenue/normal/delays.gif"; a_sbutton_3_3 = new Image(); a_sbutton_3_3.src = "submenue/active/delays2.gif"; n_sbutton_3_4 = new Image(); n_sbutton_3_4.src = "submenue/normal/belles.gif"; a_sbutton_3_4 = new Image(); a_sbutton_3_4.src = "submenue/active/belles2.gif"; n_sbutton_3_5 = new Image(); n_sbutton_3_5.src = "submenue/normal/keane.gif"; a_sbutton_3_5 = new Image(); a_sbutton_3_5.src = "submenue/active/keane2.gif"; n_sbutton_3_6 = new Image(); n_sbutton_3_6.src = "submenue/normal/parade.gif"; a_sbutton_3_6 = new Image(); a_sbutton_3_6.src = "submenue/active/parade2.gif";
/* menu 4 */ n_button_4 = new Image(); n_button_4.src = "menue/normal/interview.jpg"; a_button_4 = new Image(); a_button_4.src = "menue/active/interview2.jpg";
/* menu 5 */ n_button_5 = new Image(); n_button_5.src = "menue/normal/stories.jpg"; a_button_5 = new Image(); a_button_5.src = "menue/active/stories2.jpg";
/* menu 6 */ n_button_6 = new Image(); n_button_6.src = "menue/normal/konzert.jpg"; a_button_6 = new Image(); a_button_6.src = "menue/active/konzert2.jpg";
function swapimage(image, newstate){ var img = eval("document." + image); switch (newstate) { case "normal": var newimg = eval("n_" + image); img.src = newimg.src; break; case "active": var newimg = eval("a_" + image); img.src = newimg.src; break; } }
function submenu(menid, sbuttonid, action){ var smenu_frame = document.getElementById('smenu_frame_' + menid); var button = "button_" + menid; var sbutton = false; if (sbuttonid >= 0) { sbutton = "sbutton_" + menid + "_" + sbuttonid; } switch (action) { case "show": swapimage(button, 'active'); if (sbutton) { swapimage(sbutton, 'active'); } smenu_frame.style.visibility = 'visible'; break; case "hide": if (sbutton) { swapimage(sbutton, 'normal'); } else { swapimage(button, 'normal'); } smenu_frame.style.visibility = 'hidden'; break; } }
// --> </script>
<title></title> </head>
<body> <div id="menu"> <div class="menuentry" id="menu_0" style="top: 120px;" onmouseover="javascript:swapimage('button_0', 'active');" onmouseout="javascript:swapimage('button_0', 'normal');"> <a href="#"><img name="button_0" src="menue/normal/album.jpg" height="18" width="167" alt="Album" border="0" id= "button_0"></a> </div>
<div class="menuentry" id="menu_1" style="top: 143px;" onmouseover="javascript:swapimage('button_1', 'active');" onmouseout="javascript:swapimage('button_1', 'normal');"> <a href="#"><img name="button_1" src= "menue/normal/singles.jpg" height="18" width="167" alt= "Singles" border="0" id="button_1"></a> </div>
<div class="menuentry" id="menu_2" style="top: 166px;" onmouseover="javascript:swapimage('button_2', 'active');" onmouseout="javascript:swapimage('button_2', 'normal');"> <a href="#"><img name="button_2" src= "menue/normal/sampler.jpg" height="18" width="167" alt= "Sampler" border="0" id="button_2"></a> </div>
<div class="menuentry" id="menu_3" style="top: 189px;" onmouseover="javascript:submenu(3, -1, 'show');" onmouseout= "javascript:submenu(3, -1, 'hide');"> <a href="#"><img name="button_3" src= "menue/normal/bestseller.jpg" height="18" width="167" alt= "Bestseller" border="0" id="button_3"></a> </div>
<div class="menuentry" id="menu_4" style="top: 212px;" onmouseover="javascript:swapimage('button_4', 'active');" onmouseout="javascript:swapimage('button_4', 'normal');"> <a href="#"><img name="button_4" src= "menue/normal/interview.jpg" height="18" width="167" alt= "Interview" border="0" id="button_4"></a> </div>
<div class="menuentry" id="menu_5" style="top: 235px;" onmouseover="javascript:swapimage('button_5', 'active');" onmouseout="javascript:swapimage('button_5', 'normal');"> <a href="#"><img name="button_5" src= "menue/normal/stories.jpg" height="18" width="167" alt= "Stories" border="0" id="button_5"></a> </div> </div>
<div class="smenu_frame" id="smenu_frame_3" style="top: 179px;" onmouseover="javascript:submenu(3, -1, 'show')" onmouseout= "javascript:submenu(3, -1, 'hide')"> <div class="smenuentry" id="smenu_3_0" onmouseover= "javascript:submenu(3, 0, 'show');" onmouseout= "javascript:submenu(3, 0, 'hide');"> <a href="#"><img name="sbutton_3_0" src= "submenue/normal/hal.gif" height="15" width="85" alt="Hal" border="0" id="sbutton_3_0"></a> </div>
<div class="smenuentry" id="smenu_3_1" onmouseover= "javascript:submenu(3, 1, 'show');" onmouseout= "javascript:submenu(3, 1, 'hide');"> <a href="#"><img name="sbutton_3_1" src= "submenue/normal/stills.gif" height="15" width="85" alt= "The Stills" border="0" id="sbutton_3_1"></a> </div>
<div class="smenuentry" id="smenu_3_2" onmouseover= "javascript:submenu(3, 2, 'show');" onmouseout= "javascript:submenu(3, 2, 'hide');"> <a href="#"><img name="sbutton_3_2" src= "submenue/normal/weevil.gif" height="15" width="85" alt= "Weevil" border="0" id="sbutton_3_2"></a> </div>
<div class="smenuentry" id="smenu_3_3" onmouseover= "javascript:submenu(3, 3, 'show');" onmouseout= "javascript:submenu(3, 3, 'hide');"> <a href="#"><img name="sbutton_3_3" src= "submenue/normal/delays.gif" height="15" width="85" alt= "Delays" border="0" id="sbutton_3_3"></a> </div>
<div class="smenuentry" id="smenu_3_4" onmouseover= "javascript:submenu(3, 4, 'show');" onmouseout= "javascript:submenu(3, 4, 'hide');"> <a href="#"><img name="sbutton_3_4" src= "submenue/normal/belles.gif" height="15" width="85" alt= "The Bells" border="0" id="sbutton_3_4"></a> </div>
<div class="smenuentry" id="smenu_3_5" onmouseover= "javascript:submenu(3, 5, 'show');" onmouseout= "javascript:submenu(3, 5, 'hide');"> <a href="#"><img name="sbutton_3_5" src= "submenue/normal/keane.gif" height="15" width="85" alt= "Keane" border="0" id="sbutton_3_5"></a> </div>
<div class="smenuentry" id="smenu_3_6" onmouseover= "javascript:submenu(3, 6, 'show');" onmouseout= "javascript:submenu(3, 6, 'hide');"> <a href="#"><img name="sbutton_3_6" src= "submenue/normal/parade.gif" height="15" width="85" alt= "Soft Parade" border="0" id="sbutton_3_6"></a> </div> </div> </body> </html>
-
Hallo Chris,
weiss nicht ob klappt, aber wie siehts aus, wenn Du ein transparentes Bild als Hintergrund nimmst?
Gruss Ralf