Ergebnis 1 bis 4 von 4

Thema: Button ändern beim Anklicken Rollover-Effekt

  1. #1
    Teeny
    Registriert seit
    19.01.2004
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Button ändern beim Anklicken Rollover-Effekt

    Hallo! Ich habe zwei Button-Grafiken. Die eine soll erscheinen, sobald der Button gedrückt ist. Doch wie mache ich das?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Administrator Avatar von admin
    Registriert seit
    16.01.2003
    Ort
    Karlsruhe
    Beiträge
    12.779
    Danke
    1
    Bekam 4 mal "Danke" in 2 Postings
    Blog-Einträge
    42

    Standard

    Das sollte Dir helfen

    Rollover-Effekt
    [Ein unkompliziertes Script.]



    Dieser Effekt wird auf vielen Websites verwendet, um beim Darüberfahren mit der Maus über ein Image einen Rollovereffekt zu erzielen. Das geschieht durch ein JavaScript, welches beim Aktivieren mit der Maus (Rollover) einfach das Image mit einem andern austauscht.

    Dazu braucht man nichts weiter als zwei Grafiken. Die eine wird z.B. als Link verwendet und die andere zum Austauschen des Bildes, wenn die Maus sich darüber befindet.



    Die beiden Grafiken einzeln:
    Beiden Grafiken mit JavaScript:


    Die Rollover-Funktion können Sie an der rechten Grafik ausprobieren ausprobieren.


    Die erste Grafik nennen wir button.gif und die zweite button_r.gif. Das »_r« zeigt uns, dass es sich um die Grafik für den Rollover handelt.


    Das Script
    ... ist recht einfach. Die Stellen, die sich von einem einfachen Hyperlink unterscheiden sind rot gekennzeichnet. Die Plazierung der Grafiken darin ist blau:




    <a href="ziel.html" onMouseOver="document.b1.src='button_r.gif'" onMouseOut="document.b1.src='button.gif'">
    [img]button.gif[/img]</a>



    Wichtig ist, dass Sie in die ursprüngliche Grafik – die vom Link umschlossen wird – die Bezeichnung name="b1" einfügen. Damit weiss das JavaScript, bei welcher Grafik der Rollover-Effekt stattfinden soll.
    Falls die Grafiken in einem anderen Ordner liegen müssen Sie zusätzlich zu den Grafik-Namen noch den Pfad angeben (z.B.: ../images/button.gif).



    Mehrere Rollover
    Um das Script für weitere Rollover in einer HTML-Datei verwenden zu können, muss das Script und der Image-Tag an folgenden Positionen angepasst werden:




    <a href="ziel2.html" onMouseOver="document.b2.src='button2_r.gif'" onMouseOut="document.b2.src='button2.gif'">
    [img]button2.gif[/img]</a>


    Bei der Verwendung weiterer Rollover-Effekte ersetzen sie die Zahlen fortlaufend.
    Die Forenregeln und Nutzungsbedingungen sind auch zum lesen da !!!


  3. #3
    Teeny
    Themenstarter

    Registriert seit
    19.01.2004
    Beiträge
    43
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Gut, aber ist over und out nicht nur, wenn man darüberfährt? Ich brauch es, wenn es angeklickt wird. So wie "gedrück" und "nicht gedrückt".

  4. #4
    Macintosch
    Gast

    Standard

    dann wählst du eben nicht "onMouseOver" sondern z.b. "onClick" oder "gotFocus"

Ähnliche Themen

  1. Bild mit rollover effekt???
    Von Fibi im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 8
    Letzter Beitrag: 25.08.2007, 14:13
  2. Rollover effekt mal anders
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 28.05.2007, 19:48
  3. Image-Map + Rollover Effekt
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.12.2006, 09:27
  4. Grafik als Button + Rollover effekt
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 31.08.2006, 09:02
  5. Bereich für RollOver Effekt festlegen?
    Von freeQ im Forum Flash Forum
    Antworten: 2
    Letzter Beitrag: 19.02.2006, 20:08

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •