nicht angemeldet
CSS Opacity / Transparenz
hallo an alle,
mich beschäftigt derzeit ein Problem mit CSS Opacity und Transparenz. Ich habe mal einige Beispieldateien hochgeladen:
[URL="http://home.arcor.de/osterhasbilder/test/index.html"] Website [/URL]
(Die HTML-Datei als Beispiel)
[URL="http://home.arcor.de/osterhasbilder/test/transIE1.JPG"] Screenshot IE ohne Mousover[/URL]
[URL="http://home.arcor.de/osterhasbilder/test/transIE2.JPG"] Screenshot IE bei Mousover[/URL]
[URL="http://home.arcor.de/osterhasbilder/test/transFX1.JPG"] Screenshot Firefox ohne Mousover[/URL]
[URL="http://home.arcor.de/osterhasbilder/test/transFX2.JPG"] Screenshot Firefox bei Mousover[/URL]
[URL="http://home.arcor.de/osterhasbilder/test/transOP1.JPG"] Screenshot Opera ohne Mousover[/URL]
[URL="http://home.arcor.de/osterhasbilder/test/transOP2.JPG"] Screenshot Opera bei Mousover[/URL]
Erläuterung:
Ich habe einen DIV-Container erstellt, der scrollbar ist. Darin sollen mehrere Bilder angezeigt werden, welche bei einem Mousover transparent werden und ein Text eingeblendet wird.
Hierzu habe ich inzwischen mit einem Display:block gearbeitet, das die Größe des Bildes haben sollte (300x300px!). Eine Tabelle soll die Bilder voneinander trennen und es auch möglich machen gegebenenfalls noch Zwischenabstände einzufügen. Mein Layout, sowie die ganze Seite ist noch in einem sehr frühen Stadium - ich möchte am liebsten erst einmal das genannte Problem mit der Transparenz lösen.
Nungut, im Internetexplorer und Firefox funktioniert bereits folgendes:
Die Site wird geladen.. TransOFF ist aktiv und dadurch ist nur das Hintergrundbild zu sehen.. die anderen Inhalte sind ausgeblendet (Transparenz).
Wenn man den Mauszeiger über das Bild bewegt wird TransON gestartet, das Display:Block wird auf 50% Transparenz gehoben und es ist möglich die Box anzuklicken und somit einen Link aufzurufen.
Das einzige Problem beim Internetexplorer und Firefox sind derzeit eigentlich nur, dass ich den Display:Block bzw. die Fläche, die später auf eine 50%ige Transparenz gehoben wird, nicht in mein gewünschtes 300x300px Format bekomme. Wie auf den Screenshots zu sehen, ist beim Mouseover die Fläche die transparent wird nicht genau deckungsgleich mit dem Hintergrundbild... wobei hier der Internetexplorer schon fast optimal liegt!
Beim Opera-Browser funktioniert der erste Schritt, TransON wird geladen, die Inhalte bis auf das Hintergrundbild sind ausgeblendet.
Jedoch funktioniert dannach der Schritt, den Display:Block einzublenden nicht.
----
Ich hoffe das Problem ist soweit verständlich .. ich füge hier nochmal den relevanten Quelltext ein:
[QUOTE]ul.transOFF {width: 100%; border:1px solid black;opacity:.00; filter: alpha(opacity=0); -moz-opacity: 0.0;}
ul.transON {width: 100%; background-color: black;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;border:1px solid black;}
ul#Navigation a {
display:block;
position:absolute;
height:300px;
width:290px;
margin:0px;
left:0px;
text-decoration: none; font-weight: bold;
}
#spalte1 {
position:absolute;
margin:0px;
width: 301px;
height: 300px;
left:0px;
top:0px;
}
---------------------------------------------------------------------
<div style="overflow: auto; position: absolute; bottom: 40px; height: 320px; width: 70%; left: 30%;">
<table width="3000" height="300" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="298" background="300x300.jpg">
<ul class="transOFF" id="Navigation" style="width: 289px; height: 301px; position:absolute; margin:0px; top: 0px; left: 0px;" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'">
<a href="test.html" class="styleS1">Der dritte</a>
</ul></td>
<td width="10"> </td>
<td width="298" background="300x300.jpg"><ul class="transOFF" id="Navigation" style="width: 289px; height: 301px; position:absolute; margin:0px; left: 315px; top: 4px;" onmouseover="this.className='transON'" onmouseout="this.className='transOFF'">
<a href="test.html" class="styleS1">Der dritte</a>
</ul>
</td>
<td width="960"> </td>
<td width="705"> </td>
<td width="715"> </td>
</tr>
</table>
</div>
[/QUOTE]
ansonsten benutze ich bei allen Browsern die aktuelle Version. Derzeitige Schönheitsmacken wie die schlechte Ordnung im Quelltext, Nicht-ausgliederung in eine seperate CSS-Datei und usw. sind mir schon bewusst - das möchte ich alles erst noch ändern, wenn ich endlich mal dieses Problem gelöst habe.
Ich hoffe jemand kann mir dabei ein bischen unter die Arme greifen.
Vielen Dank schonmal. Ciao, Marcel
PS: das tutorial auf das ich mich beziehe ist übrigends folgendes: http://www.mandarindesign.com/opacity.html