Rollover-Buttons/Bilder und Pop-up-Fenster |
|
In diesem Beitrag geht es darum, wie man seine Webseite mit sogenannten Rollover-Buttons oder auch Rollover-Bildern aufpeppen kann. Technisch gesehen handelt es sich dabei um zwei verschiedene Bilder oder Grafiken die beim "überfahren" mit der Maus einfach ausgetauscht werden. So etwas kann man auf ganz unterschiedliche Art und Weise realisieren. Ich beschreibe hier nur zwei Möglichkeiten, einmal mittels CSS und der hover-Anweisung und einmal mittels Javascript. Wer von CSS gar keine Ahnung hat, sollte erst einmal die Grundlagen studieren, da ich hier auf selbige nicht eingehe. Bei Javascript reichen schon einfache Programmierkenntnisse in C/C++, PHP oder Shell-Programmierung um die verwendeten Befehle zu verstehen. Fangen wir mit einer einfachen CSS-Variante an. Folgendes Listing erstellt lediglich einen farbigen Block, der beim überfahren der Maus die Farbe wechselt. |
|
|
|
Unser Beispiel sieht so aus:
Und wird mittels
|
|
|
|
in unser HTML-Dokument eingebaut. Bei Bildern wird das Ganze ein wenig umfangreicher, das Prinzip ist aber dasselbe. Noch erwähnen sollte man, daß man sich eines Tricks bemühen muß um die Rollover-Bilder im vorraus zu laden, da sonst je nach Ladezeit des Bildes eine unschöne Verzögerung eintritt. |
|
|
|
Der erste Block definiert allgemeine Link-Eigenschaften. Hat man auf der Seite keine anderen Links als die Rollover-Bilder, erspart man sich durch die allgemeinen Angaben viel Schreibarbeit. Um unsere Rollover-Bilder zu realisieren, definieren wir einen Block und geben ihm zwei unterschiedliche Hintergrundbilder. Eines das beim überfahren der Maus angezeigt wird und eines ohne Maus. Nachteil der CSS-Methode ist, daß kein img-Tag verwendet wird, also auch kein Alternativ-Text angegeben werden kann. Unsere Bilder sind nichts anderes als leere div-Blöcke mit einem Hintergrundbild. In den allgemeinen Angaben definieren wir die Art (display: block;), die Höhe und Breite und die Schriftfarbe. Auch wenn die Seite ausschließlich aus Rollover-Bilder besteht, ist die Schriftfarbe nicht unerheblich, da z.B. der Firefox-Browser um aktive Links eine kleine gepunktete Linie in der Schriftfarbe zieht. Nach den allgemeinen Link-Definitionen sollte pro Bild jeweils ein eigener Block folgen, der neben der Klasse für die Identifizierung den Verweis auf die Grafikdatei enthält. Einmal für die als erstes anzuzeigende Grafik und einmal für das Rollover-Bild. Als letztes wird noch eine Klasse definiert, über die wir die Rollover-Bilder vorausladen können. Das erreichen wir durch eine img-Angabe im HTML-Dokument mit einer durch die Klasse definierten Höhe und Breite von 0 und einer Anzeige (display) von none. Diese img-Angabe weil sowieso nicht sichtbar kann überall im Dokument stehen. Manche Browser zeigen eine Tabelle allerdings erst an, wenn sie vollständig geladen ist. Stehen die img-Angaben innerhalb der Tabelle kann sich so der Aufbau verzögern. |
|
|
|
Rollover-Bilder mit Javascript In Javascript gibt es mehrere Möglichkeiten um Rollover-Bilder zu erstellen. Eine Möglichkeit ist es die Bilder über das img-Tag anzusprechen. Dabei kann man den Bildern entweder einen Namen geben oder sie über ihre fortlaufende Nummer ansprechen. Das Ganze packt man in eine Funktion, die man im HTML-Code ausführt. Zwei Beispiele: |
|
|
|
Das Array document.images[] enthält alle Bilder in der Webseite mit fortlaufender Nummerierung, also wird mit der Array-Nummer 0 das allererste Bild auf der Webseite angesprochen. Problematisch bei diesem Verfahren ist das genaue "Durchzählen" der Bilder, denn die Nummer muß natürlich zum entsprechenden Bild eindeutig passen. Besser ist daher dem Bild einen Namen zu geben und es über diesen anzusprechen. |
|
|
|
Diese Variante hat auch den Vorteil, daß man die Funktion lediglich einmal definieren muß und den Bildnamen und das Bild mit der Pfadangabe direkt im HTML-Code an die Funktion übergibt. So hat man wenig Code und es bleibt übersichtlich. Ansonsten gibt es noch eine Variante ganz ohne Funktion in dem man die erforderlichen Javascript-Befehle gleich zum img- oder a-Tag schreibt. |
|
|
|
Diese letzte Methode -da total einfach und simpel- ist meine Favorisierte. Wie man sieht, ist es kein Hexenwerk Rollover-Bilder mittels Javascript zu erstellen. Eine Kleinigkeit fehlt aber noch, denn so wie der Code jetzt ist, werden die "Hover"-Bilder nicht im voraus geladen, sondern erst beim Aufruf, was wie schon bei CSS zu einer unschönen Verzögerung führt. |
|
Um Bilder im voraus zu laden werden sie als Image-Objekte dem Browser bekannt gemacht. Ein Image-Objekt wird wie folgt generiert: |
|
|
|
Für ein einzelnes Bild ganz nett, aber hat man eine ganze Reihe von Bildern, ist die Verwendung eines Arrays wesentlich besser. Folgender Code bildet zwei Arrays. Ein Array mit einer Liste von Bildern und ein Array für die Image-Objekte. |
|
|
|
Wie man sieht, ruft man die Funktion im body-Tag beim Laden des HTML-Dokuments auf. Sämtliche Bilder in der Liste werden in den Browser-Cache geladen und stehen sofort zur Verfügung. Etwas vorsicht muß man mit dem alt-Tag bei den Images walten lassen, denn sollte die Ladezeit der Bilder etwas länger dauern, wird solange der Alternativtext angezeigt. Sollte das nicht erwünscht sein und man stattdessen lieber einen leeren Rahmen mit einem Bildsymbol wollen, sollte man keine alt-Tags verwenden. Damit ist unser kleiner Exkurs in Sachen Rollover-Bilder soweit abgeschlossen. Als Ergänzung und im Bezug auf Joomla möchte ich zum Abschluß noch kurz auf die Möglichkeiten von Rollover-Effekten und/oder -Bildern in Joomla eingehen. Rollover-Bilder in Joomla Joomla bringt von Haus aus die Möglichkeit mit durch Definition eigener Menü-Klassen-Suffixe das Menü mittels Rollover-Effekten per CSS aufzupeppen (siehe ersten Abschnitt dieser Page). Dazu ruft man das entsprechende Menü-Modul auf und vergibt einen eigenen Namen für das Suffix über den man die entsprechende Klasse aufrufen kann. |
|
Dabei kann man über das Menü-Klassen-Suffix einzelne Menüeinträge neu designen (z.B. das padding oder margin für die einzelnen Menüeinträge ändern) und über das Modul-Klassen-Suffix das Design des Gesamt-Menü-Moduls (z.B. das padding oder margin zu anderen Modulen in der Page). Ein Eintrag in der zum Template zugehörigen CSS-Datei kann dann z.B. so aussehen: |
|
|
|
Wer es ein wenig komfortabler haben will, dem empfehle ich das Menü-Modul ImageTTFmenue, in welches man nicht nur eigene Hintergrundgrafiken für die Menü-Buttons einfügen kann, sondern sogar seinen eigenen TrueType-Font einbinden kann. Gerade letzterer Punkt, die Einbindung eines eigenen Fonts zur individuellen Schriftgestaltung ist mit HTML-Befehlen gar nicht möglich. Mit dem ImageTTFmenue-Modul ist es ein leichtes sein ganz eigenes, individuelles Menü zu erstellen. |
|
|
|
Pop-up-Fenster mit Javascript Neben den bösen Pop-up-Fenstern, die beim Öffnen einer Seite einem einfach ungefragt entgegen springen und einem von Viagra über Penisvergrößerung alles mögliche andrehen wollen, gibt es auch nützliche Pop-up's. Solche die auf Wunsch per Mausklick geöffnet werden und ein Bild oder Zusatzinformationen zur aktuellen Seite beinhalten. Dieser Abschnitt ist diesen nützlichen Fenstern gewidmet. Um ein solches Pop-up zu realisieren, braucht man nichts weiter als eine kleine Javascript-Funktion und eine onClick-Anweisung. Die Funktion definieren wir wie immer im Header der Seite: |
|
|
|
Unsere Funktion hat den Namen openBrWindow und bekommt als Parameter die url des zu öffnenden Links, den Namen des Pop-up-Fensters und die Zusatzinformationen übergeben. Somit können wir mehrere Links per Pop-up auf der Seite öffnen und müssen nur die dazugehörigen Details angeben. Der Befehl fenster.focus(); sorgt dafür, daß unser Pop-up-Fenster den Fokus erhält, d.h. daß es ausgewählt wird, was bei mehreren oder schon einmal geöffneten Pop-up-Fenstern nicht unbedingt der Fall sein muß. Hat man das Pop-up schon geöffnet und ist es durch die Auswahl des Hauptfensters in den Hintergrund verschwunden, wird es durch die focus-Anweisung bei einem erneuten Klick auf den Link in den Vordergrund geholt und ausgewählt. Der Rückgabewert return false; verhindert, daß der Link zweimal geöffnet wird. Um das zu verstehen, müssen wir uns zuerst den HTML-Code anschauen und wie unsere Javascript-Pop-up-Anweisung darin untergebracht ist.
|
|
Pop-up-Fenster mittels CSS und javascript-Close/Ok-Button Hier noch eine Pop-up Variante, die eigentlich gar keine ist, da es sich bei einem CSS-div-Block nicht um ein eigenständiges Fenster handelt, sondern eben nur um eine CSS-Box. In dieser einfachen Ausführung ist sie auch nicht verschiebbar, aber immerhin mittels eines X-Buttons in der rechten Ecke oder des Ok-Buttons im unteren Bereich schließbar. Der Vorteil dieser Variante: möchte man ein kleines Hinweisfenster beim Öffnen der Webseite einblenden, wird die im vorherigen Abschnitt vorgestellte Variante mittels javascript von den gängigen Browsern heutzutage mittels Popup-Blockern einfach geblockt. Diese Variante mittels CSS nicht. Zuerst definieren wir mittels CSS eine Box und die entsprechenden Bereiche in der Box, sowie den X- und Ok-Button um die Box zu schließen: |
|
|
|
|
|
|
|
|
|
Zurück zur Auswahl | |