Ebenen

Ebenen oder "layers", wie man im englischen sagen würde, bieten die Möglichkeit mehrere Grafiken übereinander zu legen. Die meisten komplexeren Grafikprogramme bieten die Möglichkeit an, mit Ebenen zu arbeiten. Allerdings können die Ebenen nicht in allen Dateiformaten gespeichert werden, sondern müssen oft zu einer Ebene zusammengefasst werden. Die gängigen Grafikformate für das Web (png, gif und jpg) können Ebenen nicht separat speichern.

Mit HTML kann man Ebenen dennoch nutzen.

Rollover-Effekt

Eine Möglichkeit, die sich mit Ebenen realisieren lässt, ist der Rollover-Effekt. Hierzu legt man an eine bestimmte Stelle ein Bild, und an die selbe Stelle, aber darunter, das Bild, wie zum Beispiel der Button aussehen soll, wenn der Benutzer mit der Maus darüber gefahren ist. So ist nur das obere Bild sichbar, wenn der Benutzer allerdings mit der Maus über den Button fährt, kann man das untere Bild einfach nach oben springen lassen.

Im vergleich zu anderen Realisierungsmöglichkeiten für ein Rollover-Effekt werden hier beide Bilder bereits geladen. Wenn dann der Benutzer mit der Maus über den Button fährt, wird nicht kurzzeitig kein Bild angezeigt, während der Browser erst das neue Bild vom Server laden muss.

Beispielseite

Die Schlüsselinformation zu Bestimmung von Ebenen ist in HTML:

style="z-index:1"

Wobei die Zahl 1 durch jede andere ersetzt werden kann. Wenn zwei Bilder vorhanden sind, kann man dem einen Bild den z-index "1" geben und dem anderen den z-index "2". Das Bild mit dem höheren z-index liegt über dem Bild mit dem niedrigeren z-index.

High-light-Effekt

Einen weiteren Effekt, den man mit Ebenen realisieren kann, ist das Aufhellen oder Abdunkeln von Grafiken. Dass Grafiken aufgehellt werden sieht man speziell bei bei Rollover-Effekten öfters. Anstatt, dass man für jeden Button, eine weitere Grafik anlegt, die den selben Button nochmal darstellt, nur eben heller, kann man auch stattdessen ein Bild von 1x1 Pixel Größe anlegen, das komplett weis ist. Allerdings sollte die Transparenz von diesem Pixel bei etwa 20% liegen. Das kann man entweder im Grafikprogramm einstellen und dann als eine png Datei speichern oder man verwendet das Attribut "opacity".

<img style="opacity:0.2" src="1x1_weis.png" width=100 height=20>

Wenn man nun dieses Bild über ein Bild von einem Button legt, der 100 Pixel breit und 20 Pixel hoch ist, erscheint der Button heller. Mit style="visibility:hidden" und style="visibility:visible" kann man bei einem onMouseOver die zusätzliche Helligkeit sichbar oder unsichtbar machen.

Tipps: Webdesign / Webdesign Berlin