Rollover-Buttons/Bilder und Pop-up-Fenster
mit CSS oder Javascript

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.

/* Beispiel.css für farbigen Block */

a.farbwechsel:link {padding: 10px;
display: block;
width:
120px;
background:
aqua;
color:
black;
}

a.farbwechsel:visited {padding: 10px;
display: block;
width:
120px;
background:
aqua;
color:
black;
}

a.farbwechsel:hover {padding: 10px;
display: block;
width:
120px;
background:
blue;
color:
white;
}

a.farbwechsel:active {padding: 10px;
display: block;
width:
120px;
background:
blue;
color:
white;
}
Unser Beispiel sieht so aus:
Und wird mittels
<a class="farbwechsel" href="link">Startseite</a>

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.

/* Beispiel.css für Rollover-Bilder */

a:link {display: block; width: 200px; height: 50px; color: #FFFFFF;}
a:visited {display: block; width: 200px; height: 50px; color: #FFFFFF;}
a:hover {display: block; width: 200px; height: 50px; color: #FFFFFF;}
a:active {display: block; width: 200px; height: 50px; color: #FFFFFF;}

a.bild1:link {background-image: url(bild1.jpg);}
a.bild1:visited {background-image: url(bild1.jpg);}
a.bild1:hover {background-image: url(bild1-hover.jpg);}
a.bild1:active {background-image: url(bild1-hover.jpg);}

/* Preload Images */
.preload {width: 0px; height: 0px; display: none;}

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.

<!-- Setzen des Links -->
<a class="bild1" href="link"></a>

<!-- Vorausladen des Rollover-Bildes -->
<img class="preload" src="bild1-hover.jpg">


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:

<script type="text/javascript" language="JavaScript">

function einblenden()
{
document.images[0].src="bild1-hover.jpg";
}

function ausblenden()
{
document.images[0].src="bild1-normal.jpg";
}

</script>

<!-- Aufruf der Funktion im HTML-Bereich -->
<img src="bild1-normal.jpg" onMouseOver="einblenden();" onMouseOut="ausblenden();">

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.

<script type="text/javascript" language="JavaScript">

function tauschen(bildname,image)
{
document.images[bildname].src = image;
}

</script>

<!-- Aufruf der Funktion im HTML-Bereich -->
<img name="bild1" src="bild1-normal.jpg" onMouseOver="einblenden('bild1','bild1-hover.jpg');" onMouseOut="ausblenden('bild1','bild1-normal.jpg');">

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.

<!-- Aufruf der Javascript-Befehle nur im HTML-Bereich -->

<a href="Link zum nächsten Dokument" onMouseOver="bild1.src='bild1-hover.jpg'" onMouseOut="bild1.src='bild1-normal.jpg'">
<img name="bild1" src="bild1-normal.jpg"></a>

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:

var Bildvariable = new Image();
Bildvariable.src = "Image.jpg";

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.

<script type="text/javascript" language="JavaScript">

// Liste der Bilder die im voraus geladen werden müssen
var listehover = new Array();
listehover[listehover.length] = "bilder/bild1.jpg";
listehover[listehover.length] = "bilder/bild2.jpg";
listehover[listehover.length] = "bilder/bild3.jpg";

// Array für die Image-Objekte
var bildobjekte = new Array();

// Funktion für die Übergabe der Bilder in die Image-Objekte
function preload()
{
for (i = 0; i < listehover.length; i++)
{
var Bild = new Image();
Bild.src = listehover[i];
bildobjekte[i] = Bild;
}
}

</script>

<!-- Aufruf der Funktion im Body-Tag -->
<body onLoad="preload()">

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.

Bild: Joomla-Menue-Suffix.jpg

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:

/* Für das Link-Verhalten (mouseover) */
.mainlevel_hauptmenu:active{color: #DD0000;}
.mainlevel_hauptmenu:hover{background-color: #999999;}

/* Weitere Design-Eigenschaften für Menü-Buttons */
.mainlevel_hauptmenu {background-color: #B5B5B5;
text-decoration:
none;
border-top:
2px solid #999999;
width:
120px;
height:
34px;
text-align:
center;
padding-top:
3px;
}


/* Design-Eigenschaften des Gesamt-Menü-Moduls */
.moduletable_hauptmodul {margin-top: 4px;}

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.

Bild: Joomla-ImageTTFmenue.jpg


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:

<script type="text/javascript" language="JavaScript">

function openBrWindow(url,windowname,features)
{
fenster=window.open(url,windowname,features);
fenster.focus();
return false;
}

</script>

<!-- Aufruf der Funktion im HTML-Bereich -->
<a href="Link-zum-Bild-oder-HTML.jpg.php" onClick="return openBrWindow(this.href, 'bild1', 'scrollbars=yes, resizable=yes, width=400, height=200')"><img src="bilder/bild1.jpg" border="0" width="150" height="130"></a>

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.
In unserem HTML-Code wird die Link-Angabe lediglich um die onClick-Angabe erweitert und bleibt sonst unverändert. Das hat den entscheidenden Vorteil, daß bei abgeschaltetem Javascript der Link trotzdem funktioniert. Würde der Link so -> <a href="javascript:;"> aufgebaut sein, würde bei abgeschaltetem Java gar nichts passieren und die Informationen des Links wären unerreichbar. Da unser Link ein ganz gewöhnlicher HTML-Link ist, wird er auch als solches bei abgeschaltetem Java ausgeführt. Der einzige Unterschied: statt unserem Pop-up-Fenster wird der Link im Hauptfenster angezeigt. Damit der Link aber nicht zweimal geöffnet wird, einmal im Hauptfenster und einmal im Pop-up-Fenster, muß man bei eingeschaltetem Javascript das Ausführen des normalen Links unterbinden. Das macht der Rückgabe-Wert return false;, welcher die Ausführung des normalen Links verhindert. Ist Javascript deaktiviert, wird der Code sowieso nicht ausgeführt, also gibt es keinen Rückgabewert, ergo wird der Link ganz normal behandelt. Damit wir den Rückgabe-Wert auch bekommen, muß in der onClick-Anweisung "return openBrWindow" angegeben sein. In Klammern folgt dem Funktionsaufruf die zu übergebenden Parameter. this.href ist ein Zeiger auf den momentanen Link, so müssen wir den Link nicht zweimal angeben. Danach folgt der Name des Pop-up-Fensters und anschließend die Zusatzinformationen. Die wichtigsten Zusatzinformationen sind:

  • scrollbars - legt fest ob Scrollbalken vorhanden sein sollen oder nicht.
  • resizable - legt fest, ob das Fenster in der Größe verändert werden kann.
  • width,height - legt die Abmaße des Pop-up-Fensters fest.
  • top=10,left=10 - legt die Position des Pop-up-Fensters fest.

  • status - legt fest, ob eine Statuszeile am unteren Rand vorhanden sein soll.
  • toolbar - legt fest, ob Standardschaltflächen vorhanden sein sollen.
  • menubar - legt fest, ob das Standard-Menü vorhanden sein soll.
  • location - legt fest, ob die Eingabe-Zeile vorhanden sein soll.
  • directories - legt fest, ob die Schnellstartleiste vorhanden sein soll.
Außer den Abmaßen und der Positionsangabe sind sämtliche Zusatzinformationen mit yes/no oder 1/0 zu aktivieren, bzw. deaktivieren. Leider hatten die Zusatzinformationen resizable, status, location und directories bei iceweasel keinerlei Auswirkung. In der Beziehung kocht wohl jeder Browser sein ganz spezielles, eigenes Süppchen...

 

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:

/* Beispiel.css für Hinweisfenster */

#hinweisbox {border: 2px solid gray;
background-color: #EEEEEE;
color:
black;
top:
100px;
left:
200px;
width:
300px;
height:
160px;
padding:
10px;
position:
absolute;
}

.area_X_button {height: 30px;
text-align: right;
}

.area_text {height: 100px;
text-align: center;
}

.area_ok_button {height: 20px;
text-align: center;
}

.ok_button {text-decoration: none;
background: white;
font-size:
14px;
padding:
8px;
border:
2px solid #AAAAAA;
font-weight:
bold;
cursor:
default;
}

span.closeX {background: white;
padding: 2px;
border:
1px solid gray;
font-weight:
bold;
color:
#333333;
cursor:
default;
}


Anschließend müssen wir lediglich die Box mit einer kleinen javascript Anweisung in die Webseite integrieren:

<div id="hinweisbox">
   <div class="area_X_button">
       <span class="closeX"
       onClick="getElementById('hinweisbox').style.display='none';">
       &times;</span>
   </div>
   <div class="area_text">
       Hier der Hinweistext!
   </div>
   <div class="area_ok_button">
       <span><a class="ok_button" href="#"
       onClick="getElementById('hinweisbox').style.display='none';">
       Ok</a></span>
   </div>
</div>


Wir erstellen eine div-Box mit Namen hinweisbox, die sich über die Webseite legt. Dabei bestimmen die Werte top und left die Position der Box. Die Box enthält weitere div-Boxen die die jeweiligen Bereiche definieren für das X zum Schließen, den Textbereich und den Ok-Button. Durch das onClick Attribut beim X- und Ok-Button wird durch einen Mausklick der javascript-Befehl getElementById('hinweisbox').style.display='none'; ausgeführt, welcher unserer Hinweisbox das CSS-Attribut display:none; mitgibt, wodurch die Box ausgeblendet wird. Noch eine kleine Besonderheit: Der Ok-Button ist als Link ausgeführt, was den Sinn hat, möchte man mit dem Button nicht einfach nur die Box schließen sondern auf eine andere Seite weiterleiten, muß man lediglich im href statt der Raute eine andere Seite angeben. So könnte man die Box z.B. als Veranstaltungshinweis gestalten, ala "Heute Abend Party!" und aus dem Ok-Button macht man einen Info-Button. Wen die Party nicht interessiert, kann die Box mittels dex X in der rechten oberen Ecke einfach wegklicken, wer sagt, "Party, Saugeil!" der kann mittels des Info-Buttons auf die Informations-Seite der Party gelangen.