Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

2-stufige Buttons erstellen:
diese Grafik reagiert sobald die Maus darauf zeigt
<img src="images/knopf.gif" onMouseOver="src='images/knopf_gedrueckt.gif''" onMouseOut="src='images/knopf.gif'">

3-stufige Buttons erstellen:
diese Grafik reagiert zusätzlich auf Mausklick
<!-- dieses Skript können sie unter www.all-community.de kostenlos downloaden. Bitte entfernen sie diesen Hinweis nicht! --> <!-- Hier folgt ein Auswahl-Menü --> <!-- 1. Button: pic1 --> <img name="pic1" src="images/knopf.gif" onLoad="this.write='yes'; this.normal='images/knopf.gif'; this.maus='images/knopfa.gif'; this.gedrueckt='images/knopfb.gif';" onMouseOver="if (this.write=='yes') {this.src=this.maus}" onMouseOut="if (this.write=='yes') {this.src=this.normal}" onClick="this.src=gedrueckt; this.write='no'; setTimeout('document.images[\'pic1\'].src=document.images[\'pic1\'].normal', 1000);"> <!-- 2. Button: pic2 --> <img name="pic2" src="images/knopf.gif" onLoad="this.write='yes'; this.normal='images/knopf.gif'; this.maus='images/knopfa.gif'; this.gedrueckt='images/knopfb.gif';" onMouseOver="if (this.write=='yes') {this.src=this.maus}" onMouseOut="if (this.write=='yes') {this.src=this.normal}" onClick="this.src=gedrueckt; this.write='no'; setTimeout('document.images[\'pic2\'].src=document.images[\'pic2\'].normal', 1000);"> <!-- hier können weitere Einträge folgen --> <!-- Hier ist unser Menü zuende --> <!-- wichtiger Hinweis: Namen für Button dürfen nicht doppelt verwendet werden. Ersetzen sie, wenn sie den Quelltext eines neuen Button (copy, paste) einfügen, jeweils dort, wo sie "picX" finden die Zahl X durch eine andere, welche sie für alle anderen Button noch nicht verwenden. -->

Beschreibung:

Image-Buttons sind etwas schönes - schöner ist es, wenn sie bei bestimmten Ereignissen - zum Beispiel, wenn der Nutzer mit der Maus auf sie zeigt, ihre Form ändern, um zu zeigen, dass sie ausgewählt sind.

MouseOver-Effekte für Buttons

Die Syntax ist wirklich simpel. Ausgelöst wir die Anzeige durch den Event "onMouseOver" - das heißt, sobald die Maus über dem betreffenden Objekt ist. Im Endeffekt sieht der Aufruf so aus:  onMouseOver="src='url'" Geben sie statt "url" einfach die URL des Bildes ein, dass angezeigt werden soll, sobald der Nutzer die Maus über den Button bewegt.

Beispiel:

<img src="images/knopf.gif"
onMouseOver="src='images/knopfa.gif''"
onMouseOut="src='images/knopf.gif'">

Jetzt wollen wir einen Schritt weiter gehen und den Button dazu benutzen, auch auf Klick eine spezielle Grafik anzuzeigen. Dazu ist allerdings schon etwas mehr Überredungskunst notwendig.

Die erste Idee - auf die sie sicher auch kommen würden wäre:

<img src="images/knopf.gif"
onMouseOver="src='images/knopfa.gif''"
onMouseOut="src='images/knopf.gif'"
onClick="src='images/knopfb.gif';
setTimeout('src=\'images/knopf.gif\'', 1000);">

Wir tun hier eigentlich nichts als bei Anklicken (onClick) der Schaltfläche ein Bild einzublenden und nach 1000 ms (also 1 Sekunde) wieder das Ursprungsbild zu laden.... ach wirklich? Es wäre schön, wenn es so einfach ginge.
Schuld ist die "Garbage Control" ("Müllabfuhr") von Java-Script, die alle lokal erzeugten Variablen nach Ausführung eines Skripts eliminiert, so dass sie die Referenz auf das Objekt selbst anschließend dem nächsten Miniskript nicht mehr zur Verfügung steht.
Das Skript ist nach "src='images/knopfb.gif';" beendet. Der zeitversetzt ausgeführte Programmcode kann schon nicht mehr auf die "src" (=source) - Eigenschaft des Image-Objektes zugreifen. Das gilt auch für jegliche vorher erzeugte Variablen.
Also adressieren wir unser Objekt absolut, um dieses Problem zu umgehen. Dazu vergeben wir einen Namen...

<img name="pic" src="images/knopf.gif"
onMouseOver="src='images/knopfa.gif''"
onMouseOut="src='images/knopf.gif'"
onClick="src='images/knopfb.gif';
setTimeout('document.pic.src=\'images/knopf.gif\'', 1000);">

Das wäre geschafft - Und schon sind wir in das nächste Fettnäpfchen getreten. Den Grund können sie sich leicht überlegen: Nachdem die Schaltfläche angeklickt wurde bewegen wir den Mauszeiger wieder von der Schaltfläche. Das Ereignis, "Maus außerhalb Bild" (onMouseOut) tritt somit bereits ein und stellt das Ursprungsbild wieder her lange bevor die 1 Sekunde vorbei ist.
Um diesen kleinen Schönheitsfehler nun auch noch auszuschließen speichern wir einfach noch eine zusätzliche Eigenschaft, die den Status unseres Skripts angibt. Der Zweck ist: diese Eigenschaft sagt uns, ob wir gerade innerhalb dieser 1 Sekunde sind, das heißt, wann wir auf das Umschalten warten müssen bzw. wann wir getrost das Ursprungsbild wiederherstellen können.

Wir müssen wegen der "Garbage Control" unseren Wert statisch außerhalb des Skripts speichern. Und da es schon mal da ist, was bietet sich da besseres an, als unser Bild dafür "Zweck zu entfremden" und als statischem (weil externen) Objekt eine neue Eigenschaft unterzuschieben. Warum das funktioniert können sie sich leicht begreiflich machen: unser Bild ist ein außerhalb des Skripts existierendes HTML-Objekt. Greifen wir in einem von diesem Objekt ausgelösten Skript darauf zu, dann können wir das, weil wir eine Referenz auf dieses Objekt haben. Diese Referenz wird anschließend von der "Garbage Control" wieder gelöscht. ABER: wir können, wenn wir ihm einen Namen geben, auch über die direkte Adresse des HTML-Objekts auf dieses und seine Eigenschaften zugreifen und am Ende neue Eigenschaften definieren, die solange gespeichert bleiben, wie das HTML-Objekt existiert.

<img name="pic" src="images/knopf.gif"
onMouseOver="src='images/knopfa.gif'; this.write='yes'"
onMouseOut="if (this.write=='yes') src='images/knopf.gif';"
onClick="src='images/knopfb.gif'; this.write='no';
setTimeout('document.pic.src=\'images/knopf.gif\'', 1000);">

OnMouseOver: wenn wir gerade auf das Objekt zeigen wollen, soll die Umschaltung auch möglich sein. Also setzen wir die Eigenschaft so, dass die Umschaltung möglich ist
OnMouseOut: hier kommt unsere Eigenschaft zum Tragen - sind wir gerade innerhalb der 1 Sekunde nach dem Klick, in der nicht umgeschaltet werden soll, steht die Eigenschaft auf "no", sonst (weil wir ja vorher auf das Bild gezeigt und das Ereignis "onMouseOver" ausgelöst haben) auf "yes. Steht die Eigenschaft auf "yes" schalten wir um.
OnClick: hier müssen wir wirklich nicht viel tun, außer die Eigenschaft auf "no" zu setzen, weil ja schließlich gerade das Bild angeklickt wurde.

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: