 Imgage tauschen
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.
- Vorher - Nachher
- Tag - Nacht
- Sommer - Winter
- Status Ein - Status Aus
- Soundsymbol Ein - Soundsymbol Aus
Mit der Funktion 'Swap()' des Scripts, können sie 'hin' und auch wieder "zurückschalten". Das im Head eingebundene Script können sie auf der Seite mehrmals verwenden.
 Beispiel 1 für 2 Bilder
 Beispiel 2 für 3 Bilder
Beispiel 3 für 2 Bilder
Scriptcode für Beispiel 1
Script im HEAD
Das Script erwartet beim Aufruf (Klicken auf den Link) 2 Parameter:
'bildname' und 'tauschbild'
<script type="text/javascript" language="JavaScript">
<!--
// w. jansen web-toolbox.net
function swap(bildname,tauschbild)
{
document.images[bildname].src=tauschbild;
}
//-->
</script>
Bild im BODY
Sie müssen für das dargestellte Bild das Attribut 'name' eintragen. Anhand der dort eingetragenen Bezeichnung wird das Bild im Script angesprochen.
<img name="bild02" src="image01.jpg" width="82" height="120" border="1">
Links im BODY
Im Link werden dem Script 'swap()' zwei Werte übergeben:
Bildname und Quelle des Tauschbildes.
<a href="javascript:swap('bild02','image02.jpg')">
Schwarz-Weiss Foto ansehen</a>
<a href="javascript:swap('bild02','image01.jpg')">
Farb Foto ansehen</a>
Was geschieht hier?
beim Anklicken wird mittels JavaScript die Anweisung gegeben:
1) Tausche das Bild mit dem Namen 'bild02' gegen das Bild 'image02.jpg' aus.
2) Tausche das Bild mit dem Namen 'bild02' gegen das Bild 'image01.jpg' aus.
Zur Anpassung folgende Änderungen im Aufruf:
| Element |
hier im Beispiel |
ersetzen mit |
| Bildname |
bild02 |
Text |
| Bildhöhe |
120 |
Wert in Pixel |
| Bildbreite |
82 |
Wert in Pixel |
| Tauschbild |
image02.jpg |
Dateiname |
|
| 
WWW.WEB-TOOLBOX.NET
ScriptCODE 
ZURÜCK 
Schwarz-Weiss Foto
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}