onMouseOver, onMouseOut und onClick für Buttons - Denkblockade

[Ben]

Hallo,

ich habe gerade eine kleine Blockade.

Ich soll für eine Navigationsleiste mehrere Buttons mit je 3 Zuständen (normal, over, geklickt) basteln.

Ich habe einfach das SelfHTML-Beispiel genommen und noch ein onClick hinzugefügt. Sieht jetzt so aus:

<script type="text/javascript">
<!--

button1 = new Image();
button1.src = "images/buttons/eingangsseite.gif";
highlight1 = new Image();
highlight1.src = "images/buttons/eingangsseite2.gif";
click1 = new Image();
click1.src = "images/buttons/eingangsseite3.gif";

function Bildwechsel(Bildnr,Bildobjekt)
{
 window.document.images[Bildnr].src = Bildobjekt.src;
}

function clicked(Bildnr,Bildobjekt,klick)
{
 if(!geklickt)
 {
  window.document.images[Bildnr].src = Bildobjekt.src;
  geklickt = klick;
  }

}

//-->
</script>

und dann folgendes für den Button:

<a href="home.php" target="inhalt" onMouseOver="Bildwechsel(1,highlight1);" onMouseOut="Bildwechsel(1,button1);" onClick="Bildwechsel(1,click1);"><img src="images/buttons/eingangsseite.gif" width="160" height="23" border="0"></a>

Das Problem ist jetzt, dass wenn ich auf den Button geklickt habe, ich ja den Mauszeiger wieder wegbewege. Darum wird dann wieder die onMouseOut (also die normale) Grafik angezeigt. Es soll aber die onClick-Grafik erhalten bleiben.

Wie kann ich das lösen?

Vielen Dank im Voraus und viele Grüße
Ben

[Cheatah]

Hi,

Das Problem ist jetzt, dass wenn ich auf den Button geklickt habe, ich ja den Mauszeiger wieder wegbewege. Darum wird dann wieder die onMouseOut (also die normale) Grafik angezeigt. Es soll aber die onClick-Grafik erhalten bleiben.

Wie kann ich das lösen?

indem Du Dir diesen Zustand merkst. Das ist der übliche Einsatz für Variablen.

Cheatah

[Ben]

Hallo Cheatah :)

indem Du Dir diesen Zustand merkst. Das ist der übliche Einsatz für Variablen.

Hm, also muss ich onClick eine andere Funktion aufrufen und dann einen entsprechenden Wert in eine Variable schreiben. Und bevor ich die anderen Zustände auslöse, muss ich dann wohl diese Variable abfragen oder?

Na da muss ich wohl noch etwas basteln, weil ich momentan gar keinen Aufbau im Kopf habe...

Dankeschön! Ist immerhin ein Ansatz.

Viele Grüße
Ben

[Cheatah]

Hi,

Hm, also muss ich onClick eine andere Funktion aufrufen und dann einen entsprechenden Wert in eine Variable schreiben. Und bevor ich die anderen Zustände auslöse, muss ich dann wohl diese Variable abfragen oder?

ja, ganz genau. Nur dass es nicht unbedingt eine andere Funktion sein muss. Lediglich die Variablen sollten global sein, damit sie nicht nach Funktionsende im Nirvana verschwinden ;-)

Cheatah

[Ben]

Hi Cheatah,

ja, dass die Variablen global sein müssen ist ja klar. Dann werde ich die Bildnr. einfach jedesmal bei onClick in die globale Variable schreiben. Oder? Wah, ich bin irgendwie durcheinander... *g*

Ich glaube, ich verschiebe das auf morgen. Habe irgendwie Konzentrationsschwierigkeiten.

Vielen Dank!

Viele Grüße
Ben

[Cheatah]

Hi,

ja, dass die Variablen global sein müssen ist ja klar.

schön :-) Das ist nämlich für viele eine weitere Hürde.

Dann werde ich die Bildnr. einfach jedesmal bei onClick in die globale Variable schreiben. Oder?

Ein guter Anfang.

Ich glaube, ich verschiebe das auf morgen. Habe irgendwie Konzentrationsschwierigkeiten.

Eine gute Wahl :-)

Cheatah

[Ben]

Hallo Cheatah,

bin schon ein Stückchen voran gekommen, aber habe gleich erstmal Feierabend. Werde morgen sicherlich nochmal nachfragen und hoffe wieder auf deine Denkanstöße. :-)

Vielen Dank auf jeden Fall.

Viele Grüße
Ben

[Chrischaaan]

hi

schreib das doch einfach in den code für jeden einzelnen button.wenn dir das zu lang wird mahcste halt mit variablen die sache?!

bye

[Ben]

Hi,

werde das wohl mit Variablen lösen, da es sonst echt zu unübersichtlich wird. Aber mir fehlt irgendwie noch das kleine Klicken... Naja, danke trotzdem.

Viele Grüße
Ben

[Ben]

Hello again,

ich habe mich nun mit etwas klarerem Kopf (so hoffe ich zumindest *g*) an meine Buttons gesetzt und folgendes geschrieben:

function Bildwechsel(Bildnr,Bildobjekt)
{
 if(geklickt == Bildnr)
 {
  return false;
 }
 else
 {
  window.document.images[Bildnr].src = Bildobjekt.src;
 }
}

function clicked(Bildnr,Bildobjekt)
{
 {
  window.document.images[Bildnr].src = Bildobjekt.src;
  geklickt = Bildnr;
  }
}

Das funktioniert schon einigermaßen gut. Das 3. Bild bleibt auch nach dem MouseOver erhalten. Das Problem ist, dass bei dem Klick auf den 2. Button auch der 1. im onClick-Zustand bleibt.

Wie kann ich diesen dann automatisch wieder in den Normalzustand bringen?

Vielleicht ist ja Cheatah wieder da und kann mich sanft mit der Nase draufstupsen (oder mit dem Kopf auf den Tisch knallen, wenn nötig *g*). :)

Vielen Dank im Voraus und viele Grüße
Ben