 Grafik tauschen (referenzieren über den Namen)
Sie möchten ein Bild innerhalb ihrer HTML-Seite durch Klicken austauschen? Dazu gibt es unterschiedliche Einsatzmöglichkeiten. Es muss sich nicht immer um ein wenig Auflockerung der Seite oder Spielkram handeln.
|
|
Bildtausch beim Anklicken
Ein Bildtausch kann für unterschiedliche Zwecke eingesetzt werden. Neben den üblichen MouseOver-Effekten in einer Navigation können sie z.B. einen bestimmten Status signalisieren:
- Vorher - Nachher
- Tag - Nacht
- Sommer - Winter
- Status Ein - Status Aus
- Soundsymbol Ein - Soundsymbol Aus
einfaches Beispiel für den Bildtausch beim Anklicken (Grafik anklicken)
Der 'Auslöseort' für die Tauschfunktion ist hier als Link bei der Grafik festgelegt.
Die Ansicht kann von farbig auf schwarz-weis umgeschaltet werden.
|
 |
Mit der Funktion 'Swap()' können sie hin- und auch wieder zurückschalten. Das im HEAD-Bereich eingebundene Script können sie innerhalb der Seite mehrmals verwenden, weil beim Funktionsaufruf der Bildname (Objektname) der zu tauschenden Grafik als Parameter an die Funktion übergeben wird.
1 Beispiel 1 für den Bildtausch beim Anklicken (Textlink anklicken)
Der 'Auslöseort' für die Tauschfunktion ist hier als Link beim Text festgelegt.
2 Beispiel 2 für den Bildtausch beim Anklicken (Textlinks anklicken)
3 Beispiel 3 für den Bildtausch beim Anklicken (Textlink anklicken)
Scriptcode für Beispiel 1
Script im HEAD-Bereich
Das Script erwartet beim Aufruf 2 Parameter: 'Bildname' und 'BildURL'
Der Aufruf der Funktion kann durch unterschiedliche Ereignisse (Events) ausgelöst werden. Bei einem Link üblicherweise durch einen MausKlick. Denkbar wären auch Ereignisse wie z.B. MouseOver.
<script type="text/javascript" language="JavaScript">
<!--
// w. jansen web-toolbox.net
function swap(Bildname,BildURL)
{
document.images[Bildname].src = BildURL;
}
//-->
</script>
Bild im BODY-bereich
Voraussetzung ist, das für die zunächst dargestellte und später auszutauschende Grafik das Attribut 'name' eintragen wurde. Anhand der dort eingetragenen Bezeichnung kann die Grafik vom javaScript angesprochen (adressiert) werden.
<img name="bild02" src="image01.jpg" width="82" height="120" border="1">
Links im BODY-Bereich
Im Link werden dem Script 'swap()' zwei Werte übergeben:
Bildname und Quelle des Tauschbildes.
<a href="javascript:swap('bild02','foto01.jpg')">
Foto Bücherei ansehen</a>
Was geschieht hier?
Beim Anklicken wird mittels JavaScript die Bildquelle für die Grafik mit dem Namen 'bild02' getauscht: Tausche das Bild mit dem Namen 'bild02' gegen das Bild mit der URL 'foto01.jpg' aus.
Was geschieht beim Aufruf der Funktion 'swap', wenn dabei 2 Werte so übergeben werden:
<a href="javascript:swap('bild02','foto01.jpg')">Foto Bücherei ansehen</a>
Die beiden Werte werden innerhalb der Funktion in die Anweisung
...
document.images[Bildname].src = BildURL;
...
in der Reihenfolge der Übergabe übernommen:
document.images["bild02"].src = "foto01.jpg";
In Worten würde die Anweisung dann so lauten:
In diesem Dokument | Grafik mit dem Namen 'bild02' | src = 'foto01.jpg'
Die neue (Bild-)Quelle für die Grafik mit dem Namen 'bild02' ist nun 'foto01.jpg'.
Wenn sie die Funktion in einem Link aufrufen, tragen Sie die entsprechenden beiden Werte zur Übergabe an die Funktion ein.
| Element |
hier im Beispiel |
beim Aufruf ersetzen mit |
| Bildname |
bild02 |
vergebenem Namen der Grafik |
| BildURL |
foto01.jpg |
Pfad/Dateiname |
| 
Home • JavaScript • Bilder • Grafiken tauschen
Download
Beispiel
)
Schwarz-Weiss Foto
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}