Mathias: Hover Effekt mit Mouse Over und Bildwechsel HILFE

Hallo zusammen,

wie könnt ihr mir helfen:

Ich habe drei Bilddateien (Buttons) Wenn man mit der Maus über den Button fährt (1. Bilddatei), soll er die Farbe ändern (2. Bilddatei), wenn man das Klickereignis durchführt soll er sich er eine ganz andere Form annehmen (3. Bilddatei) Wie hört sich der Code dafür an?

Danke

Grüße

  1. Hi,

    da Du den falschen Themenbereich gewählt hast, hast Du vermutlich auch an der verkehrten Stelle gesucht. Unter Javascript, speziell den Event-Handlern onmouseover etc. findest Du Deinen Code.

    freundliche Grüße
    Ingo

  2. Hi,

    Ich habe drei Bilddateien (Buttons) Wenn man mit der Maus über den Button fährt (1. Bilddatei), soll er die Farbe ändern (2. Bilddatei), wenn man das Klickereignis durchführt soll er sich er eine ganz andere Form annehmen (3. Bilddatei) Wie hört sich der Code dafür an?

    Wenn die Grafik als Hintergrund eines Links eingebunden wird, sorgt http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_hover_active_focus für Veränderung beim Hovern und Klicken. Dass sich das Hintergrund-Bild ändern soll, legst du in diesem Fall mit http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image fest.
    Wenn die Grafik selbst der Link ist, musst du über das DOM auf sie zugreifen. Dazu gibst du ihr idealerweise über das id-Attribut einen Namen, mit dem du im Event-Handler mit document.get_element_by_id (-> http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id) auf sie zugreifen kannst. Um nun das Bild durch ein anderes (, das du selbstverständlich schon vorgeladen hast,) zu tauschen, verwendest du folgenden Konstrukt:

    document.get_element_by_id('name_des_bildes').src='neues_bild.gif';

    Gruß
    Arx

    --
    Do it yourSELF 'cause SELFmade is bestmade.
    Selfcode: ie:% fl:( br:^ va:} ls:[ fo:) rl:( n4:{ ss:| de:> js:| ch:? mo:} zu:)
    Selfcode entschlüsseln: http://peter.in-berlin.de/projekte/selfcode/
    Selfcode-Info: http://emmanuel.dammerer.at/selfcode.html
    Für alle Forum-Neulinge:
    1.http://de.selfhtml.org/
    2.http://suche.de.selfhtml.org/ -> http://forum.de.selfhtml.org/archiv/
    3.http://forum.de.selfhtml.org/faq/ -> http://forum.de.selfhtml.org/cgi-bin/fo_post