onMouseOver

[BlackWidow]

Hi Leute,

ich habe hier eine Liste von Links und vor den Links ist immer ein Pfeil... dieser ist standartmäßig blau und soll sich gelb färben, wenn ich mit der Maus drüberfahre... dazu hab ich 2 Dateien hochgeladen (gelber Pfeil und blauer Pfeil). Wie mach ich das nun?

<a href="www.link.de"><img src="blauerpfeil.gif" border="0" onmouseover="gelberpfeil.gif"> 1. Link</a>

^^Funktioniert nicht.

[Elya]

Hallo BlackWidow,

ich habe hier eine Liste von Links und vor den Links ist immer ein Pfeil... dieser ist standartmäßig blau und soll sich gelb färben, wenn ich mit der Maus drüberfahre... dazu hab ich 2 Dateien hochgeladen (gelber Pfeil und blauer Pfeil). Wie mach ich das nun?

Entweder mit Javascript:

http://de.selfhtml.org/javascript/beispiele/buttons.htm

Statt mit den Bildnummern kannst Du auch mit dem Bildnamen arbeiten:

http://de.selfhtml.org/javascript/objekte/images.htm#name

Oder mit CSS, wie z.B. hier beschrieben:
http://www.1ngo.de/web/buttons.html

Gruß aus Köln-Ehrenfeld,

Elya

[BlackWidow]

Hi Elya,

irgendwie seh ich nicht so recht durch. Also für meinen Link hab ich nen hover per css definiert, aber der ändert ja nicht die Farbe des Bildes.
Das muss doch irgendwie ganz einfach per onMouseOver und onMouseOut gehen?

[dbenzhuser]

N'Obend

Das muss doch irgendwie ganz einfach per onMouseOver und onMouseOut gehen?

Wie inzwischen oben zu lesen, sind derartige Event-Handler eben nicht simpel, weil sie JavaScript erwarten. Du müsstest also entweder vorhandenen Code irgendwoher koppieren, oder selbst ein klitzekleines bisschen Programmieren lernen :)

Tschö,
dbenzhuser

[Dennis]

Hi BlackWidow,

irgendwie seh ich nicht so recht durch. Also für meinen Link hab ich nen hover per css definiert, aber der ändert ja nicht die Farbe des Bildes.

Du musst den hover Effekt (CSS) ja auch nicht auf den Link anwenden, sondern auf auf das Bild.

Das muss doch irgendwie ganz einfach per onMouseOver und onMouseOut gehen?

Geht schon, allerdings ist das dann Javascript, Nachteile dazu hab ich oben erwähnt, und da geht es auf die Art und Weise, wo dir Elya den Link zu geschickt hat.

MfG, Dennis.

[BlackWidow]

Ich möchte aber gerne, daß sich der Pfeil ändert, wenn ich mit der Maus über den Link fahre. Nur darum hab ich das Bild ja im a-Tag mit drin.

[Dennis]

Hi BlackWidow,

Ich möchte aber gerne, daß sich der Pfeil ändert, wenn ich mit der Maus über den Link fahre. Nur darum hab ich das Bild ja im a-Tag mit drin.

Ist ja auch kein Problem. Mach aus dem A-Element ein Block Element, teile dem padding-left so groß zu, wie deine Grafik breit ist, gib als Hintergrund Bild mit no-repeat die normale Grafik an und beim Hover Effekt gibts dann eben die andere Grafik als Hintergrund Bild.

MfG, Dennis.

[nag]

Hallo,

Ich möchte aber gerne, daß sich der Pfeil ändert, wenn ich mit der Maus über den Link fahre. Nur darum hab ich das Bild ja im a-Tag mit drin.

warum schaust du dir nicht die beispiele an, die wir die aufgezeigt haben? du musst lediglich den quellcode kopieren und an deine dateinamen anpassen. solltest du dann noch immer probleme haben, dann poste deinen quelltext des fehlversuches hier und dir wird geholfen.

um probieren und LESEN wirst du nicht herumkommen ;)

mfg NAG

[dbenzhuser]

N'Obend

Ich möchte aber gerne, daß sich der Pfeil ändert, wenn ich mit der Maus über den Link fahre. Nur darum hab ich das Bild ja im a-Tag mit drin.

Mit CSS musst du da schon ein wenig weiter einsteigen:

Lese dir http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus durch.

Binde das Bild als Hintergrundbild des Links ein (der Link braucht dann entsprechende Maße, eventuell ein padding, da musst du rumprobieren...). Mit

a:hover {
   background-image:url(zweitesbild.gif)
}

kannst du das Bild dann wechseln.

Du hast aber auch schon genug helfende Links in diesem Thread bekommen. Wenn du dich da durchgearbeitet hast sollte eigentlich alles geklärt sein.

Eine super einfach-simpel-schnell-Lösung gibt es leider nicht :)

Tschö,
dbenzhuser

[nag]

Hallo,

hier findest du eine auf css basierende Lösung

http://css.maxdesign.com.au/listamatic/vertical14.htm

mfg NAG

[dbenzhuser]

Servus

<a href="www.link.de"><img src="blauerpfeil.gif" border="0" onmouseover="gelberpfeil.gif"> 1. Link</a>

^^Funktioniert nicht.

Wie auch :)

Was im onmouseover stehen muss ist JavaScript-Code!
Ganz so simpel wirst du es also leider nicht hinbekommen.

Du kannst dir ein kleines Script schreiben, dass eine beliebige Grafik austauscht, welches du dann im onmouseover aufrufst. Dem Script musst du dann mitteilen welche Grafik es wechseln soll, wie es sie findet etc.

Ein Anfang wäre z.B. http://de.selfhtml.org/javascript/beispiele/buttons.htm

Desweiteren lässt sich das ganze auch mittels CSS ganz ohne JavaScript lösen.
Das Bild müsste dann als Hintergrund eingebunden werden und per Pseudoklasse (a:hover) gewechselt werden.

Da du dich bei beidem erst einlesen müsstest, empfehle ich dir mit der CSS-Methode anzufangen, das sollte hier imho die bessere Möglichkeit sein.

Tschö,
dbenzhuser

[Dennis]

Hi BlackWidow,

<a href="www.link.de"><img src="blauerpfeil.gif" border="0" onmouseover="gelberpfeil.gif"> 1. Link</a>

^^Funktioniert nicht.

Wie soll das bitte schön auch funktionieren?

Was du willst, ist ein sogenannter Hover Effekt. Wie das - ähnlich deinen Versuchen oben - mit Javascript geht, siehst du hier http://de.selfhtml.org/javascript/beispiele/buttons.htm

Allerdingst ist von Javascript abzuraten, da es nicht überall funktioniert. D.h. wenn jemand Javascript in seinem Browser deaktiviert hat, sieht er von deinem tollen Effelt nichts.

Verwende deshalt einen Hover Effekt mit CSS. Wie das geht, siehst du hier http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus

MfG, der schon leicht genervte, weil du nicht einfach selber in SelfhTML gesucht hast,
Dennis.