Ergebnis 1 bis 6 von 6

Thema: Mouseover-Effekt

  1. #1
    Azubi(ne)
    Registriert seit
    19.02.2005
    Beiträge
    53
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Mouseover-Effekt

    Hi Leutz!

    Ich bräuchte mal wieder Hilfe. Folgendes habe ich vor.

    Derzeit habe ich folgenden Code verbaut:

    Code:
    <div align=center>[img]/HPKontaktButtonWeiss.gif[/img]
    Beim Klich auf den Button "/HPKontaktButtonWeiss.gif" öffnet sich die Page "/kontakt.html" in einem neuen Fenster.

    Ich möchte für den Button einen Mouseover-Effekt haben und habe mir die Grafik "/HPKontaktButtonRot.gif" erstellt, die mit der Grafik "/HPKontaktButtonWeiss.gif" fast identisch ist, allerdings eine andere Schriftfarbe hat.
    Nun möchte ich, daß die Grafik mit der weissen Schrift beim Aufruf der Seite erscheint und die mit der roten Schrift sobald mit der Maus über den Button gefahren wird. Beim Anklicken soll dann w. b. auf "/kontakt.html" verlinkt werden.

    Am liebsten wäre mir eine Lösung mit CSS, evtl. auch mit JS.

    Wie stelle ich das an?
    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 !!!!!
    Gruß

    darkblue

  2. #2
    Azubi(ne)
    Themenstarter

    Registriert seit
    19.02.2005
    Beiträge
    53
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    So, in JS ist es mir bereits gelungen!

    CSS wäre mir lieber, da ich eigentlich der Ansicht bin, ein HP muß auch ohne JS funktionieren.

    Hätte da jemand eine Lösung für mich?
    Gruß

    darkblue

  3. #3
    Großmeister(in)
    Registriert seit
    03.01.2005
    Beiträge
    582
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,
    guckst Du hier.
    MfG
    6_freddy

  4. #4
    Azubi(ne)
    Themenstarter

    Registriert seit
    19.02.2005
    Beiträge
    53
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Zitat Zitat von 6_freddy
    Hi,
    guckst Du hier.
    MfG
    6_freddy
    Erst mal Danke für Deinen Hinweis,
    aber so ganz trifft das glaube ich nicht meine Problemstellung.

    Mir geht´s um gif´s, nicht um Texte.
    Gruß

    darkblue

  5. #5
    Interessierte/r
    Registriert seit
    17.02.2004
    Beiträge
    120
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Für die CSS-Lösung musst du das Bild als Hintergrundbild einbinden. Dann wäre die <DIV>-Box aber leer und würde stark verkleinert werden. Außerdem könnte man das alt-Attribut nicht nutzen (Wichtig für screenreader)

    Eine barriere- und JS-freie CSS-Lösung verwendet ein Blind-GIF:

    Code:
    <head>
    <style type=text/css>
    #kontakt &#123;
    display&#58; block;
    background-image&#58; urk&#40;bild1.jpg&#41;
    &#125;
    
    #kontakt&#58;hover &#123;
    display&#58; block;
    background-image&#58; url&#40;bild2.jpg&#41;
    &#125;
    </style>
    </head>
    <body>
    ........
    <a id="kontakt" href="../kontakt.html">
    [img]blind.gif[/img]
    </a>
    ........
    </body>

  6. #6
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Versuche es mal so:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>irgendwas</title>
    <base target="_blank"></base>
    
    <style type="text/css">
    <!--
    #but a, #but a&#58;link
      &#123;
      background-image&#58;url&#40;HPKontaktButtonWeiss.gif&#41;;
      display&#58;block;
      width&#58;120px;   ### Breite deines Button eintragen
      height&#58;24px;   ### Höhe deines Button eintragen
      &#125;
    
    #but a&#58;hover
      &#123;
      background-image&#58;url&#40;HPKontaktButtonRot.gif&#41;
      &#125;
    
    -->
    </style>
    </head>
    <body>
    
    <div id="but" align=center></div>
    
    </body>
    </html>
    Tipp: Wenn du mehrere Verweise so formatieren willst, dann kann man das in eine Tabelle packen und der Zellenhintergrund verändert sich dann jeweils, entweder andere Farbe oder eine andere Grafik. Auch da kann sich dann die Schriftfarbe ändern, dann benötigt man nur insgesamt 2 Grafiken für beliebig viele "Button"-Verweise und einen Zentrale Zellenformatierung.
    In deinem Beispiel müßtest du jetzt für jeden Link ein eigenes Stylesheet basteln.

    G.a.d.M.

    Ronald

Ähnliche Themen

  1. 3D Effekt
    Von Stephan im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 06.10.2007, 23:04
  2. Wiedermal mouseover effekt...
    Von Maggi im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 20.03.2007, 07:16
  3. Hoover/Mouseover Effekt
    Von im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.03.2007, 09:15
  4. Problem mit mouseover effekt
    Von im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 17
    Letzter Beitrag: 09.05.2006, 08:48
  5. hintergrund mit mouseover effekt ändern ?
    Von Timmy O´ Toole im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 01.06.2005, 00:00

Stichworte

Berechtigungen

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