Dieses Script ermöglicht einen Rollover-Effekt bei Grafiken, also dass sich Grafiken verändern, je nachdem, ob sie gerade mit der Maus überfahren werden oder nicht.
Das „Besondere“ dieses Scripts ist es, dass die genaue Grafik, welche einen Rollover-Effekt erhalten soll, im Script in keiner Weise angegeben werden muss. Die einzige Einstellung, die nötig ist, ist nach welchem Schema Dateinamen ersetzt werden sollen. Dies ist so zu verstehen:
Mit Hilfe der Event-Handler onmouseover und onmouseout wird die Funktion bild_wechseln(bildid) aufgerufen. Wie schon dem Funktionsaufruf zu entnehmen ist, muss dabei als Parameter die Id des Bildes übergeben werden, das verändert werden soll. Es ist also im Prinzip egal, in welchem Tag sich die Event-Handler befinden, wichtig ist die übergebene Bild-Id. Logischerweise muss dem Bild dafür auch eine gültige Id zugewiesen sein.
In der Funktion wird nun der Pfad des übergebenen Bildes ermittelt. Wichtig ist, dass das Bild eine Dateiendung besitzt, was aber ja eigentlich immer der Fall ist.
Nun kommt der interessante Teil. Aus der Bildadresse wird von hinten eine Zeichenkette extrahiert. Diese hat die Länge von endungszeichen_1 bzw. endungszeichen_2, welche gleich sein muss. Diese Zeichenkette sollte, damit der Bildwechsel möglich ist, gleich endungszeichen_1 oder endungszeichen_2 sein.
Im Folgenden wird eine neue Adresse für das Bild zusammen gesetzt. Enthielt die vorher extrahierte Zeichenkette (endungszeichen) die gleiche Zeichenkette wie endungszeichen_1, so wird in die neue Adresse endungszeichen_2 ein gesetzt oder umgekehrt.
Diese neue Adresse wird zum Schluss den ursprünglich übergebenen Bild zu gewiesen, so dass es sich verändert.
Allgemein lässt sich der Vorgang schwer ausdrücken, darum hier ein Beispiel, in dem endungszeichen_1 und endungszeichen_2 die Werte _n und _h enthalten (für normal und highlight). Man beachte, dass die Länge beider Variablen gleich ist.
Zu Anfang hat ein Bild die Adresse http://www.einedomain.de/bild1_n.gif. Nun wird es samt seiner Id durch einen Event-Handler, welcher einen Funktionsaufruf enthält, der Funktion bild_wechseln(bildid) übergeben.
Der Pfad des Bildes wird nun auseinander genommen. Da endungszeichen_1 und endungszeichen_2 jeweils zwei Zeichen enthalten, werden die letzen zwei Zeichen des Dateinamens (unabhängig von der Dateiendung) aus dem Dateinamen extrahiert. Es wird festgestellt, dass es sich dabei um _n handelt, also um endungszeichen_1.
Darum wird in die neue Adresse statt _n der Inhalt der Variablen endungszeichen_2, also _h eingefügt.
So ergibt sich eine neue Bildadresse, nämlich http://www.einedomain.de/bild1_h.gif.
Zum Schluss nochmals ganz kurz: Von jeder Grafik müssen zwei gleichnamige Versionen bestehen, die sich nur durch die letzten Zeichen im Dateinamen unterscheiden. Diese beiden Zeichen sind der Inhalt der Variablen endungszeichen_1 und endungszeichen_2. Beim mit der Maus überfahren werden diese letzten Zeichen ersetzt.
Bedingungen, dass es funktioniert:
Die in endungszeichen_1 und endungszeichen_2 gespeicherten Zeichenketten müssen gleich lang sein.
Die Dateiendungen beider Grafiken müssen gleich sein.
Das Verzeichnis beider Dateien muss das gleiche sein.
Hier eine Beispiel-HTML-Datei (auf einen Header verzichte ich weitgehend, da es nur ein Beispiel ist):
<html>
<head>
<title>Beispiel</title>
<script src="bildwechselscript.js" type="text/javascript"></script>
</head>
<body>
<p>
<img src="gfx/bild_blau.jpeg" alt="Bild, das gelb wird." id="Bild_Blau_Gelb" onmouseover="bild_wechseln(this.id)" onmouseout="bild_wechseln(this.id)"><br>
<img src="gfx/bild_gelb.jpeg" alt="Bild, das blau wird" id="Bild_Gelb_Blau" onmouseover="bild_wechseln(this.id)" onmouseout="bild_wechseln(this.id)">
</p>
</body>
</html>
Damit das funktioniert, müsste im Script _blau als endungszeichen_1 und _gelb als endungszeichen_2 angegeben sein - oder umgekehrt, das ist egal.
Beim mit der Maus überfahren würde das obere Bild gelb, das untere blau. Wenn die Maus das Bild wieder verlässt, ändert sich die Grafik wieder.
Nochmals, da es wichtig ist: Das funktioniert nur, weil _blau und _gelb jeweils fünf Zeichen haben.
Wird ein Bild an die Funktion übergeben, dessen Name weder auf endungszeichen_1 noch auf endungszeichen_2 endet, so wird die Funktion abgebrochen, es gibt keine Fehlermeldung.
Ich hoffe, es nun endlich klar ausgedrückt zu haben; ich gebe zu, es fiel mir schwer. Hier nun das Script:
function bild_wechseln(bildid) // Quelle: www.el-supremos-place.de
{
var bild = document.getElementById(bildid); //Nur, um Schreibarbeit zu sparen
var uri = bild.getAttribute('src'); //Nur, um Schreibarbeit zu sparen
var endungszeichen_1 = '_nor'; //Zeichenfolge (Moeglichkeit 1), die am Ende des Bildnamens stehen muss, damit dieses gewechselt wird
var endungszeichen_2 = '_hig'; //Zeichenfolge (Moeglichkeit 2), die am Ende des Bildnamens stehen muss, damit dieses gewechselt wird
/*'endungszeichen_1' und 'endungszeichen_1' muessen gleich lang sein! Sind die Zeichen am Ende des Bildnamens gleich denen in
'endungszeichen_1', so werden sie durch 'endungszeichen_2' ersetz und umgekehrt.*/
if (endungszeichen_1.length != endungszeichen_2.length) //Bricht das Skript ab, wenn die Laenge von 'endungszeichen_1' und 'endungszeichen_2' verschieden sind
{
return;
}
var endungszeichen = uri.slice(uri.lastIndexOf('.') - endungszeichen_1.length, uri.lastIndexOf('.')); /*'endungszeichen' enthaelt nun die
letzten X Zeichen im Bildnamen. X entspricht der Laenge von 'endungszeichen_1' bzw. 'endungszeichen_2'.*/
if (endungszeichen == endungszeichen_1 || endungszeichen == endungszeichen_2) /*Prueft, ob es sich bei den Zeichen am Ende des Dateinamens
um Zeichen handelt, die fuer einen Bildwechsel vorgesehen sind.*/
{
var uri_erster_teil = uri.slice(0, uri.lastIndexOf('.') - endungszeichen_1.length); /*Ermittelt die URI des Bildes bis zur Position, an
der die Zeichen stehen, die zum Bildwechsel ausgetauscht werden*/
var dateiendung = uri.slice(uri.lastIndexOf('.')); //Ermittelt die Dateiendung des Bildes, inklusive dem Punkt vor dieser
if (endungszeichen == endungszeichen_1) //Ersetzt die Zeichen vor der Dateiendung durch die entsprechenden (siehe oben)
{
bild.setAttribute('src', uri_erster_teil + endungszeichen_2 + dateiendung);
}
else
{
bild.setAttribute('src', uri_erster_teil + endungszeichen_1 + dateiendung);
}
}
}
Als Ergänzung dieses Scripts lohnt sich auch noch ein Blick auf das Script Bilder preloaden.
So, das wars erstmal. Ich hoffe, es hilft dem Einem oder Anderen...
El Supremo
