Buttons mit onClick-Zuständen die 2.

[Ben]

Hallo,

tut mir leid, wenn ich dafür ein neues Posting anfange, aber anscheinend beachtet keiner meinen alten ([pref:t=36491&m=199679]) und es ist doch ziemlich dringend. :-(

Hier nochmal mein momentaner Code:

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

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

Das Problem ist, dass nun zwar der onClick-Zustand bestehen bleibt, aber auch wenn ein zweiter Button geklickt wird. Wie kann ich beim Klick auf einen Button den vorher ausgewählten wieder auf den Normalzustand bringen?

Vielen Dank im Voraus und nochmals sorry für das Doppelposting!

Viele Grüße
Ben

[Cheatah]

Hi,

Das Problem ist, dass nun zwar der onClick-Zustand bestehen bleibt, aber auch wenn ein zweiter Button geklickt wird.

nutze die Zustands-Variable, um onClick das onMouseOut des anderen Buttons "zu simulieren", also die entsprechende Funktion mit den richtigen Argumenten aufzurufen.

Cheatah

[Ben]

Hallo Cheatah,

<a href="eingangsseite.php" target="inhalt"><img src="images/buttons/eingangsseite.gif" width="160" height="23" border="0" name="eingang" onMouseOver="Bildwechsel(1,eingangover);" onMouseOut="Bildwechsel(1,eingangnormal);" onClick="clicked(1,einganggeklickt,this.name);"></a>

Das ist ja das Problem. Wie soll ich hier den Namen des Zustandes übergeben? Wenn ich nur Zahlen nutze komme ich irgendwie in ein Benennungsproblem.

Folgendermaßen sind die Bilder derzeit benannt:

eingangnormal = new Image();
eingangnormal.src = "images/buttons/eingangsseite.gif";
eingangover = new Image();
eingangover.src = "images/buttons/eingangsseite2.gif";
einganggeklickt = new Image();
einganggeklickt.src = "images/buttons/eingangsseite3.gif";

leistung = new Image();
leistung.src = "images/buttons/dienstleistung.gif";
leistungover = new Image();
leistungover.src = "images/buttons/dienstleistungen2.gif";
leistunggeklickt = new Image();
leistunggeklickt.src = "images/buttons/dienstleistungen3.gif";

raum = new Image();
raum.src = "images/buttons/verkaufsraum.gif";
raumover = new Image();
raumover.src = "images/buttons/verkaufsraum2.gif";
raumgeklickt = new Image();
raumgeklickt.src = "images/buttons/verkaufsraum3.gif";

werkstatt = new Image();
werkstatt.src = "images/buttons/werkstatt.gif";
werkstattover = new Image();
werkstattover.src = "images/buttons/werkstatt2.gif";
werkstattgeklickt = new Image();
werkstattgeklickt.src = "images/buttons/werkstatt3.gif";

bestand = new Image();
bestand.src = "images/buttons/fahrzeugbestand.gif";
bestandover = new Image();
bestandover.src = "images/buttons/fahrzeugbestand2.gif";
bestandgeklickt = new Image();
bestandgeklickt.src = "images/buttons/fahrzeugbestand3.gif";

kontakt = new Image();
kontakt.src = "images/buttons/kontakt.gif";
kontaktover = new Image();
kontaktover.src = "images/buttons/kontakt2.gif";
kontaktgeklickt = new Image();
kontaktgeklickt.src = "images/buttons/kontakt3.gif";

impressum = new Image();
impressum.src = "images/buttons/impressum.gif";
impressumover = new Image();
impressumover.src = "images/buttons/impressum2.gif";
impressumgeklickt = new Image();
impressumgeklickt.src = "images/buttons/impressum3.gif";

Ich weiß nicht mehr weiter.. *seufz*

Viele Grüße
Ben

[Cheatah]

Hi,

Das ist ja das Problem. Wie soll ich hier den Namen des Zustandes übergeben?

das sollst Du nicht. Jeder Button ist eindeutig identifizierbar; genau dies ist es, was Du mittels Deiner Zustandsvariable machen sollst.

Wenn ich nur Zahlen nutze komme ich irgendwie in ein Benennungsproblem.

Nö. Dein Array heißt immer gleich.

Folgendermaßen sind die Bilder derzeit benannt:

_Dies_ ist das Problem ;-)

Cheatah

[Ben]

Hallöle liebster Cheatah ;-)

habe es nun mit dem Script von Thomas lösen können. Jedoch denke ich, dass ich das Prinzip nun verstanden habe. :-) Mir fällt es nur jedes Mal am Schwersten, den Gedankengang für das Script zu entwickeln. Wenn ich diesen habe, ist die Umsetzung nicht mehr ganz so schwer. Ich danke dir vielmals für deine Anregungen.

Ich kann nicht oft genug sagen, dass ich deine Art zu antworten (meistens) sehr bevorzuge, da sie zum Selbermachen bzw. Selbersuchen anspornt und dabei dann der Effekt des Stolzes nach der Fertigstellung erhalten bleibt (wer freut sich schon, wenn er Scripte ganz toll kopieren kann...). :-)

Viele Grüße
Ben

[Thomas Meinike]

Hallo,

Das Problem ist, dass nun zwar der onClick-Zustand bestehen bleibt, aber auch wenn ein zweiter Button geklickt wird. Wie kann ich beim Klick auf einen Button den vorher ausgewählten wieder auf den Normalzustand bringen?

Schau Dir mal das Prinzip von http://www.styleassistant.de/tips/tip15.htm an (speziell die Beispiele 15b und 15c).

MfG, Thomas

[Ben]

Hi Thomas,

danke für den Link. :-)

Werde mich da mal durcharbeiten und es hoffentlich schaffen.

Viele Grüße
Ben

[Struppi]

Hallo,

Das Problem ist, dass nun zwar der onClick-Zustand bestehen bleibt, aber auch wenn ein zweiter Button geklickt wird. Wie kann ich beim Klick auf einen Button den vorher ausgewählten wieder auf den Normalzustand bringen?

Schau Dir mal das Prinzip von http://www.styleassistant.de/tips/tip15.htm an (speziell die Beispiele 15b und 15c).

Ich bewundere deine Seite schon länger, die gibt's ja auch schon ziemilich lange, oder?
Trotzdem, darf ich es wagen einen verbesserungsvorschlag zu den Angegebenen Skripten zu machen?

Das Beispiel mit den className geht wesentlich kürzer:

(ich lass mal das CSS weg)

<SCRIPT TYPE="text/javascript">
var vorher = null;

function Klick(auswahl)
{
    if(!auswahl && !auswahl.className) return;
    if(vorher) vorher.className = "vorher";
    auswahl.className = "nachher";
    auswahl.blur();
    voher = auswahl;
}

</SCRIPT>

Link-Aufruf im BODY des Dokuments:
<A HREF="javascript:alert('Link zur seite1.htm ...')" ID="Link1"
      CLASS="nachher" OnClick="Klick(this)">Infotext Seite 1</A>
<A HREF="javascript:alert('Link zur seite3.htm ...')" ID="Link3"
      CLASS="vorher" OnClick="Klick(this)">Infotext Seite 3</A>

getestet im IE 4.0 und K-Meleon 0.7

Struppi.

[Thomas Meinike]

Hallo,

Ich bewundere deine Seite schon länger, die gibt's ja auch schon ziemilich lange, oder?

Ja, am Sonnabend werden es fuenf Jahre, das haette ich glatt vergessen. Allerdings ist die Site gerade in einer "Chill out"-Phase, was neue Inhalte betrifft.

Dafuer gibt es andere Seitenprojekte wie http://www.datenverdrahten.de/svglbc/ (SVG  Learning By Coding) und auch den einen oder anderen Print-Artikel wird es weiterhin geben.

Das Beispiel mit den className geht wesentlich kürzer:

Kein Frage, dass man oft auch noch kompakter programmieren kann. Bei vielen Beispielen halte ich aber gern am bewaehrten Code fest, etwa nach dem Motto Do not touch a running code ;-).

Ansonsten prima Ansatz natuerlich!

MfG, Thomas

[Thomas Meinike]

[Nachtrag:]

Ja, am Sonnabend werden es fuenf Jahre, das haette ich glatt vergessen. Allerdings ist die Site gerade in einer "Chill out"-Phase, was neue Inhalte betrifft.

Oh wie peinlich, es werden erst vier Jahre. Ich haette das vorher mal besser mit einem Script ausrechnen lassen sollen:

alert(new Date(new Date(2003,1,1)-new Date(1999,1,1)).getFullYear()-1970);

Ob man dieses Ergebnis wohl auch einfacher haette erhalten koennen ;-).

MfG, Thomas

[Ben]

Hi Thomas,

vielen Dank, jetzt habe ich es verstanden und hinbekommen. :-) Habe es etwas abgeändert. Ist das in Ordnung? Habe jedoch dein Copyright drinnen gelassen.

Viele Grüße
Ben

[Struppi]

Das Problem ist, dass nun zwar der onClick-Zustand bestehen bleibt, aber auch wenn ein zweiter Button geklickt wird. Wie kann ich beim Klick auf einen Button den vorher ausgewählten wieder auf den Normalzustand bringen?

Vielleicht hilft dir ja das Skript, das macht alles ohne eine Zeile zusätzlichen JS Code http://home.arcor.de/struebig/js/mouse_over/mouse_over.htm

Struppi.