div, z-index und visibility ... IE-Bug?

[Anton Katzer]

Hallo...

Folgende Situation:

• ein Hintergrundbild, auf dem Links optisch "erkenntlich" sind
• ein DIV-Layer, der ein auf "hidden" gesetztes <IMG> enthält.
• eine Funktion, die das Bild bei MouseOver auf "visible" setzt, also praktisch ein Rollover-Image
• eine Imagemap auf dem <IMG>
• ein weiteres DIV-Layer, das das "MouseOver-DIV" teilweise überlappt (Designtechnisch unvermeidlich)

... z-index des MouseOver-DIVs ist natürlich höher als das des eigentlich überlappenden DIVs.
Mein Problem ist, dass das überlappende DIV beim IE grundsätzlich ÜBER dem MouseOver-DIV liegt, ich bei letzterem also weder den optischen Effekt noch die Imagemap nutzen kann, unabhängig vom z-index.
Wenn ich den überlappenden DIV wegnehme, funktioniert's, es ist also kein Scriptfehler.
In FireFox und Opera funktioniert das ganze ebenfalls, nur halt im IE nicht. Es sind auch keine SELECT-Tags enthalten, der bekannte IE-Bug ist also ausgeschlossen ...

Was kann ich tun? Die einzige Alternative, die ich habe, ist das überlapp-DIV zu stückeln oder die Hintergrundgrafik zu ändern, aber das würde die Ladezeit ungünstig in die Höhe treiben ...

[MudGuard]

Hi,

• ein Hintergrundbild, auf dem Links optisch "erkenntlich" sind
• ein DIV-Layer, der ein auf "hidden" gesetztes <IMG> enthält.
• eine Funktion, die das Bild bei MouseOver auf "visible" setzt, also praktisch ein Rollover-Image
• eine Imagemap auf dem <IMG>
• ein weiteres DIV-Layer, das das "MouseOver-DIV" teilweise überlappt (Designtechnisch unvermeidlich)
  ... z-index des MouseOver-DIVs ist natürlich höher als das des eigentlich überlappenden DIVs.

Dank fehlendem Quellcode ist das natürlich nur geraten:

sind die div mit den z-index überhaupt positioniert?

cu,
Andreas

[Anton Katzer]

Sorry ... ja, die DIVs sind absolut positioniert.

Der Code ist noch ziemlich chaotisch, aber ich werde ihn mal post-bar zusammenklauben. ;)

[Anton Katzer]

Hier noch der entsprechende Quelltext:

<div id="Mindx" onMouseOver="SetVis('MindxGIF',1)" onMouseOut="SetVis('MindxGIF',0)" style="position:absolute; left:396px; top:433px; width:36px;  height:37px;  z-index:105">
 <img style="visibility:hidden" src="img/main_Mindx.gif" width="36"  height="37"  border="0" usemap="#MMindx" id="MindxGIF">
 <map name="MMindx">
  <area shape="poly" coords="1,14,14,1,33,23,19,37" href="#" >
 </map>
</div>

<div id="cbg" style="position:absolute; left:312px; top:0px; width:200px; height:600px; z-index:10">
<img src="img/nil_commentbg.jpg" width="200" height="600">
</div>

Und die SetVis-Funktion:

function SetVis(object_id,object_vis)
  {
   if (object_vis == 1)
    document.getElementById(object_id).style.visibility='visible';
   else
    document.getElementById(object_id).style.visibility='hidden';
  }

Wie gesagt, in FireFox und Opera funzt's.