Mouseover und OnClick zusammen

[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