Mouseover und OnClick zusammen

[Falkofreak]

<a href="\Arbeit-eigene-Website\Clubs\BVB\BVB.html" target="rechts">  
<img src="logo-bvb-1.png" onmouseover="this.src='logo-bvb.gif'"  onmouseout="this.src='logo-bvb-1.png'"> </a>  

Das ist der Code, bzw. der Teil. Ich wollte hier noch den Effekt reinmachen, dass, wenn man auf den Link klickt das Bild "logo-bvb.gif" stehen bleibt.Zur Info, das erste Bild ist Schwarzweiß und das 2. farbig.
Vielen schon mal im Voraus.
PS: Ist es auch möglich, dass wenn man nun auf ein anderes Logo klickt (das sind die Verweise und es gibt dann noch mehr Logos, aber alle mit dem gleichen Code), das Logo wieder Schwarzweiß wird und dann das andere Farbig.

[M.]

Mahlzeit,

hat es einen bestimmten Grund, dass du das nicht per CSS löst?

[falkofreak]

Mahlzeit,

hat es einen bestimmten Grund, dass du das nicht per CSS löst?

Ne ich weiß halt nur nicht wie...

[Matthias Apsel]

Om nah hoo pez nyeetz, falkofreak!

hat es einen bestimmten Grund, dass du das nicht per CSS löst?
Ne ich weiß halt nur nicht wie...

Zum Beispiel so: http://selfhtml.apsel-mv.de/verweise/verweise.html

Matthias

[M.]

Mahlzeit,

Ne ich weiß halt nur nicht wie...

Du weisst nicht, wie man onmouseover css in eine Suchmaschine eingibt?
Dann wird Hilfe echt schwer.

[molily]

hat es einen bestimmten Grund, dass du das nicht per CSS löst?

Hast du dir die Frage durchgelesen?

Dann sollte klar werden, warum CSS hier nicht geeignet ist.

Mathias

[M.]

Mahlzeit,

Hast du dir die Frage durchgelesen?

Im gesamten OP ist kein Fragezeichen enthalten. Also welche Frage sollte ich, dMn, gelesen haben?

[molily]

Wenn du inhaltlich nicht punkten kannst, wirst du sprachlich spitzfindig? Traurig.

Der OP hat die Anforderungen relativ klar definiert.

Mathias

[T-Rex]

Mouseover und onclick zusammen? zusammen was? Einen trinken gehen. Joa sicher, hab letztens in einer Bar onclick mit onblur gesehen. Die habens richtig krachen lassen.

<a href="\Arbeit-eigene-Website\Clubs\BVB\BVB.html" target="rechts">

<img src="logo-bvb-1.png" onmouseover="this.src='logo-bvb.gif'"  onmouseout="this.src='logo-bvb-1.png'"> </a>

> Das ist der Code, bzw. der Teil. Ich wollte hier noch den Effekt reinmachen, dass, wenn man auf den Link klickt das Bild "logo-bvb.gif" stehen bleibt.Zur Info, das erste Bild ist Schwarzweiß und das 2. farbig.  
  
Joa mach doch den Effekt rein, hindert dich niemand  
  

> Vielen schon mal im Voraus.  
  
Wofür? Soll ich dir die bar sagen wo onblur und onclick einen drauf gemacht haben?  
  

> PS: Ist es auch möglich, dass wenn man nun auf ein anderes Logo klickt (das sind die Verweise und es gibt dann noch mehr Logos, aber alle mit dem gleichen Code), das Logo wieder Schwarzweiß wird und dann das andere Farbig.  
  
Klingt machbar.  
  
So nu mal im Ernst. Ich lese keine Frage aus deinem Post heraus. Deswegen kann ich auch nicht beurteilen ob ich alle Informationen habe die ich für eine Lösung brauche. Ich frage mich noch immer was du überhaupt willst.  
  
Gruß  
ontour  
T-Rex

[MudGuard]

Hi,

<a href="\Arbeit-eigene-Website\Clubs\BVB\BVB.html"

Warum escapest Du A, C, und einige der B?

target="rechts"

willst Du Dir und Deinen Besuchern wirklich Frames zumuten?

Das ist der Code, bzw. der Teil. Ich wollte hier noch den Effekt reinmachen, dass, wenn man auf den Link klickt das Bild "logo-bvb.gif" stehen bleibt.

Und wo ist Dein Problem?

Wie der Event-Handler heißt, weißt Du (siehe Titel Deines Posts).
Wie Du dem img einen bestimmten src zuweist, weißt Du auch (siehe onmouseover/onmouseout).

cu,
Andreas

[molily]

Hallo,

Dein Vorhaben lässt sich mit einem bisschen JavaScript lösen, dazu sind Grundlagen des Event-Handling und der JavaScript-Programmierung nötig. Eine Bibliothek wie jQuery würde es noch weiter vereinfachen. Hast du schon einmal mit jQuery gearbeitet?

Insbesondere wenn du mehrere Bilder hast, ist es sinnvoll, die Event-Handler nicht ins HTML zu schreiben, sondern sie mit JavaScript zu registrieren. So lässt sich der Event-Handler-Code einmal notieren und wiederverwenden.

Beispiel ohne externe Bibliotheken: http://jsfiddle.net/molily/BfC8K/1/

Das JavaScript holt sich mit querySelectorAll die betreffenden img-Elemente als Liste, die dann mit einer http://de.selfhtml.org/javascript/sprache/schleifen.htm@title=for-Schleife durchlaufen wird. An den img-Elementen werden per JavaScript mit addEventListener einige Event-Handler registriert (siehe fortgeschrittenes Event-Handling). Ich habe hier die Events mouseenter, mouseleave und click gewählt.

(Mouseenter und mouseleave ähneln stark den dir bekannten mouseover und mouseout, verhalten sich bei verschachtelten Elementen aber intuitiver, denn sie steigen nicht auf. Daher sind sie allgemein zu empfehlen.)

In den Event-Handlern wird auf das Event-Objekt zugegriffen und darüber auf das geklickte img-Element (die Variable heißt immer logo). Zwei Helferfunktionen tauschen den src des betreffenden Logos aus. Die Highlight-URL ist mit einem Data-Attribut ins HTML geschrieben und kann mit getAttribute ausgelesen werden. Das ist eine Standardmethode, um Daten im HTML unterzubringen, die später von JavaScript ausgelesen werden. Damit immer die Normal-URL verfügbar ist, wird sie per JavaScript ebenfalls in einem Data-Attribut gespeichert.

Beim Klick auf ein Logo wird zunächst in den Hover-Status gesetzt, sofern der noch nicht aktiviert ist. Zusätzlich wird das Element in der Variable activeLogo gespeichert. Vorher wird gegebenenfalls das bereits aktivierte Logo zurückgesetzt. So ist sichergestellt, dass immer ein Logo aktiviert ist. Die mouseenter- und mouseleave-Handler lesen die Variable activeLogo und werden nur aktiv, wenn das jeweilige Logo nicht im Aktiv-Status ist.

Hilft dir das weiter?

Grüße
Mathias