Jörg Marzinzick

Im Entenpfuhl 3
34630 Gilserberg
Handy: 0152 2752 4177
E-Mail: j.marzinzick@googlemail.com
joerg-marzinzick.de
html5 und css3 spielereien
Im Entenpfuhl 3 34630 Gilserberg
<< Prev 1. 1 2 3 4 5 6 7 ... ... 7. Next

Das Problem:

Bei der Erstellung dieser Seite stieß ich auf ein Problem, das ich nut mit den Mitteln von css3 und html5 einfach nicht lösen konnte. Zum einen ist es unausweichlich für das Überblenden von Bildern position: relative; in Verbindung mit position: absolute; zu verwenden, zum anderen kann bei dieser Kombination die Höhe der Elternelemente nicht vom Inhalt der Kindelemente bestimmt werden, da absolut positionierte Elemente aus dem normalen Dokumentenfluss der Seite herausgelöst sind. Schliesslich habe ich das Problem mit wenigen Zeilen Javascript lösen können.

css3 Code:
#eltern { position: relative; } #kind1, #kind2 { position: absolute; top: 0; left: 0; max-width: 100%; } #kind2 { opacity: 1; } #eltern:hover #kind2 { opacity: 0; } HTML5 Code:
<div id="eltern"> <img id="kind1" src="..." /> <img id="kind2" src="..." /> </div>

Die Lösung

Man ermittelt mit Hilfe einer Javascript Funktion die Höhe des größten Kindelements und weist diese dem Elternelement beim Laden der Seite und jeder Größenänderung des Browserfensters zu.

<script>
function myFunction() {
    var element = document.getElementById('kind2').
    offsetHeight;
    var n = "" + element + "px";
    document.getElementById('eltern').
    style.height = n;
    }
</script>

<body onload="myFunction()" onresize="myFunction()">

Beispiel:

22-0001-k.png
22-0003-k.png
22-0001-k.png
22-0003-k.png

Beispiel:

Beispiel:

Bild 1
Bild 2
Bild 3
Bild 4
Bild 5
<< Prev 1. 1 2 3 4 5 6 7 ... ... 7. Next