Hallo,
ich habe ein Problem.
Ich habe 2x2 Bilder die per mouseover ausgeblendet werden sollen und anstelle der 4 Bilder ein Bild eingeblendet werden soll...
Das wird über die visibility gelöst...
Im Firefox und IE8 funktioniert es.
Im IE7 nicht, niedrigere konnte ich leider nicht testen...
Hier der Code:
CSS
Code
.allpics {width:250px; height:188px; z-index:6; position:absolute;}
.bild1 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild1g {width:250px; height:188px; z-index:8; visibility:hidden; position:absolute; border:solid 2px #000;}
.bild2 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild2g {width:250px; height:188px; z-index:8; visibility:hidden; position:absolute; border:solid 2px #000;}
.bild3 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild3g {width:250px; height:188px; z-index:8; visibility:hidden; position:absolute; border:solid 2px #000;}
.bild4 {width:125px; height:94px; float:left; z-index:5; position:relative;}
.bild4g {width:250px; height:188px; z-index:8; visibility:visible; position:absolute; border:solid 2px #000;}HTML
Code
<div class="allpics" id="allpics">
<div class="bild1g" id="bild1g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-1.png' border='0' onmouseout='javacript:verstecke1()' /></a></div>
<div class="bild2g" id="bild2g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-2.png' border='0' onmouseout='javacript:verstecke2()' /></a></div>
<div class="bild3g" id="bild3g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-3.png' border='0' onmouseout='javacript:verstecke3()' /></a></div>
<div class="bild4g" id="bild4g"><a href="level1.htm" title="Gleitringdichtungen"><img src='gleitringdichtungen-4.png' border='0' onmouseout='javacript:verstecke4()' /></a></div>
<div class="bild1" id="bild1" onmouseover="javascript:zeige1();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-1_klein.png" border="0" /></a></div>
<div class="bild2" id="bild2" onmouseover="javascript:zeige2();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-2_klein.png" border="0" /></a></div>
<div class="bild3" id="bild3" onmouseover="javascript:zeige3();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-3_klein.png" border="0" /></a></div>
<div class="bild4" id="bild4" onmouseover="javascript:zeige4();"><a href="level1.htm" title="Gleitringdichtungen"><img src="gleitringdichtungen-4_klein.png" border="0" /></a></div>
</div>
Die 4 Bilder sind genau nebeneinander und zusammen so groß wie eines, so erziele ich das ein Bild alle 4 überdeckt.
Nur im IE7 wird es nicht überdeckt sondern wird es daneben angezeigt...
Also an der Oberkante des 4ten Bild.
Bug:
[Blockierte Grafik: http://hausladc.ha.ohost.de/iebug/bug.JPG]
Richtig (eines überblendet alle 4):
[Blockierte Grafik: http://hausladc.ha.ohost.de/iebug/richtig.JPG]
Beispiellink: http://hausladc.ha.funpic.de/Hovertest/