Name: knopf1.jpg
Name: knopf2.jpg
Beschreibung der grafischen Funktion
Um den Effekt mir dem Knopf, der auch optisch gedrückt wird, zu ermöglichen,
ist erst mal ein wenig grafischer Aufwand nötig.
Beide Zustände, ungedrückt und gedrückt, müssen mit einem Grafikprogramm
erzeugt werden.
Name: knopf1.jpg |
Name: knopf2.jpg |
Im Deklarationsteil müssen nun zwei neue, grafisches Objekt erzeugt werden.
Das sieht in unserem Beispiel so aus:
| b1=new Image(); | damit wird das erste neue Grafikobjekt erzeugt. |
| b1.src="knopf1.jpg"; | dem Grafikobjekt wird das Bild knopf1.jpg zugeordnet. |
| b2=new Image(); | damit wird das zweite neue Grafikobjekt erzeugt. |
| b2.src="knopf2.jpg"; | dem Grafikobjekt wird das Bild knopf2.jpg zugeordnet. |
Wichtig ist nun, beim Einfügen der Grundgrafik in das Dokument, der Grafik
einen Namen zu geben.
Das sieht im HTML-Dokument folgendermaßen aus:
<img src="knopf1.jpg" width="89"
height="89" alt="Knopf1" name="knopfa">
Damit ist der Namen für die Grafik
festgelegt, so daß wir später darauf Bezug nehmen können.
Die Funktion zum Darstellen sehen nun so aus:
| function wechsel(objektnr) { window.document.knopfa.src=objektnr.src; } |
Diese Funktion stellt die Grafik "knopf1"
dar. Die Objektnummer, in unserem Fall "b2" bzw. beim Zurücksetzen "b1", wird von der aufrufenden Funktion übergeben. Stellt das Grafikobjekt im Dokument
dar. Dabei wird die Grafik |
Aufruf der Funktion:
Dazu definieren wir wie gewohnt einen Dummyhyperlink am Grafikobjekt:
Da der Hyperlink ein Ereignis auslöst, können wir dort unseren
Funktionsaufruf einfügen:
<a href="#" onMousedown="wechsel(b2)"
onMouseUp="wechsel(b1)" >
Sobald der Mauszeiger auf der Grafik steht und die Maustaste gedrückt wird,
startet die Funktion: wechsel1. Dabei wird die gewünschte Grafik übergeben.
Wird die Maustaste wieder losgelassen, wird die Funktion wieder gestartet
und die Ursprunggrafik übergeben.