 Grafik tauschen mit onMouseDown
Ein Bildtausch der lediglich im angeklickten Zustand sichtbar ist. Die Möglichkeit eine andere Variante einer Grafik anzuzeigen. Anwendbar wäre diese Technik z.B. bei einem Quiz, um beim Anklicken die Lösung anzuzeigen. |
|
Bildtausch bei niedergedrückter Maustaste
Absicht ist es, eine alternative Ansicht einer Grafik anzuzeigen, solage das Bild angeklickt / die Maustaste niedergehalten wird.
Eine Anwendung für
- Vorher- / Nachher-Ansicht
- Sommer- / Winterfoto
- Frage / Lösung
Zur Demo klicken sie eine der Grafiken rechts an.
|
 Ampel klicken
|
|
Script im Head
<script type="text/javascript" language="javascript">
<!--
img01=new Image()
img01.src="bild02a.jpg"
img02=new Image()
img02.src="bild02b.jpg"
//-->
</script>
Eintragung im Body
<a href="#"
onMousedown="document.images['example'].src=img02.src"
onMouseup="document.images['example'].src=img01.src">
<img src="bild02a.jpg" name="example" border=1>
</a>
Erklärung
Durch die Vergabe eines Namens ist für JavaScript das angezeigte Bild ein Objekt mit dem Namen "example" (auf Groß- / Kleinschrift achten) .
onMouseDown zeige ein anderes Bild an, OnMouseup tausche wieder zurück.
Während über dem Bild die Maustaste gedrückt wird (onMousedown), tausche die Adresse für das Objekt. Die alte Adresse (src) wird gegen die neue (src=img02.src) ausgetauscht.
Beim Loslassen (onMouseup) tausche die Adressen wieder zurück (src=img01.src).
Script mehrmals verwenden
Bei einer zweiten Anwendung innerhalb der selben HTML-Seite:
- die beiden weiteren Bilder im Head eintragen
- anderer Name für das 2. Bild vergeben (auf Groß- / Kleinschrift achten).
img03=new Image()
img03.src="bild03a.jpg"
img04=new Image()
img04.src="bild03b.jpg"
...
<img src="bild03a.jpg" name="anderes" border="1">
...
Quelltext
Den Quelltext zu diesem Beispiel finden sie ganz oben als Textdatei.
Zur Anpassung an ihre Anwendung tragen sie entsprechende Angaben ein:
| Element |
hier im Beispiel |
ersetzen mit |
| Dateiname 1 |
bild02a.jpg |
Pfad/Dateiname |
| Dateiname 2 |
bild02b.jpg |
Pfad/Dateiname |
| Objektname |
example |
irgendein Name |
|
Probleme?
Falls es einmal Probleme gibt und die Bildtauschaktionen nicht funktionieren, suchen Sie zu allererst bei den Anführungszeichen in den Funktionsaufufen. Anführungszeichen kommen immer paarweise vor. In jeder MouseOver / MouseOut-Anweisung gibt es 2 Paare einstrichige Anführungszeicehn (Hochkommas) und ein Paar normale Anführungszeichen.
Führt die Durchsicht nicht zum Erfolg kontrollieren Sie die Schreibweise für die Objektnamen / Grafiken (auf Groß- / Kleinschrift achten).
| 
Home • Bilder • Grafik tauschen mit onMouseDown
Quellcode
