Ergebnis 1 bis 7 von 7

Thema: Hover-Effekt

  1. #1
    HTML Newbie
    Registriert seit
    24.06.2008
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Hover-Effekt

    Aaaalso: http://www.pic-ture.de/funcolor/home.html - Wenn man mit der Maus über die Elemente in den gestrichelten Linien geht, soll das T-shirt (o.ä.) als foto erscheinen. Ich weiß, dass ältere Versionen vom Internet Explorer den hover-Effekt nicht erkennen und mir wurde gesagt, ich soll da einen Link reinlegen. Allerdings möchte ich, dass die Bilder nach wie vor in der CSS-Datei bleiben und nicht, dass sie auf jeder Seite extra geladen werden (ist das sinnvoll?)

    Also die Frage: Kann man auch das Vorhandensein eines BILDES und die Tatsache, DASS der Div-Bereich einen Link erhält, per CSS definieren?


    liebe grüße.... Linda
    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 !!!!!
    Das Leben ist ein Spiel. Also gewinn es!

  2. #2
    Thonixx
    Gast

    Standard

    Ja das geht....
    Ich such noch schnell den Link: aaah da: http://www.dynamicdrive.com/style/cs...-image-viewer/

    Und dass das Bild im CSS liegt, geht nie ^^

  3. #3
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ansonsten löst ein kleines Javascript das Problem für den IE < 7:
    http://htmldog.com/articles/suckerfish/

    Gruß,
    Jojo

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Sieh dir mal den Quelltext der CSS-Datei deiner Demoseite an. Hier ein Auszug bzgl. Caps:
    Code:
    #cap &#123;
       position&#58; absolute;
       top&#58; 363px;
       left&#58; 44px;
        background-image&#58;url&#40;hintergrundbilder/cap_l.gif&#41;;
    	background-repeat&#58;no-repeat;
    	width&#58; 88px;
    	height&#58; 81px;
    	&#125;
        #cap&#58;hover &#123;
        position&#58; absolute;
    	background-repeat&#58;no-repeat;
       top&#58; 363px;
       left&#58; 44px;
        background-image&#58;url&#40;hintergrundbilder/cap_e.gif&#41;;
        width&#58; 88px;
    	height&#58; 81px;
    &#125;
    Die Bilder liegen also sozusagen doch in der CSS-Datei:
    Das "Normalbild" als Hintergrundgrafik im #cap und das Hoverbild als Hintergrundgrafik im #cap:hover

    Der HTML-Teil ist recht simpel:

    Code:
    <div id="cap"></div>
    Im IE 7 klappt das. Im IE6 kann ich es momentan leider nicht testen.

    Eine weitere Möglichkeit so etwas zu realisieren findest du hier erklärt.

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    meines wissens nach interpretiert der ie6 das hover nur bei links....
    hab auch mal probiert so einen hover-effekt auf ein div zu legen, was net geklappt hatte...deshalb hab ich dann verschiedene klassen mit css gebaut und dann mit nem javascript und onmouseover die klassennamen gewechselt.
    sah dann so aus:

    Code:
    <style type="text/css">
    klasse1&#123;
    background&#58;url&#40;'pfadzumbild/bild1.jpg'&#41;;
    &#125;
    
    klasse2&#123;
    background&#58;url&#40;'pfadzumbild/bild2.jpg'&#41;;
    &#125;
    </style>
    
    <div id="cap" onmouseover="this.className='klasse2';" onmouseout="this.className='klasse1';"></div>
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Thonixx
    Gast

    Standard

    Ähmm hier gehts doch nicht um einen Bildhovereffekt !?

    Der Ersteller des Threads will doch, dass man durch Überfahren eines Linkes oder Textteil, etc... ein jeweiliges Bild zum Vorschein kommt. Oder war das falsch von mir?

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Genau! Und das kann man mit einem Link (Blindlink ohne Zielseite) und Hover lösen.
    Man benötigt lediglich zwei unterschiedliche Hintergrundgrafiken: Eine für den Normalzustand und eine für den Hoverzustand.

Ähnliche Themen

  1. Grafik hover effekt
    Von minder im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.03.2008, 14:02
  2. hover effekt
    Von Kingdingeling im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 23.12.2006, 00:35
  3. CSS hover-effekt
    Von BendOr im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.09.2006, 14:48
  4. HOVER-EFFEKT BEI TEXT?
    Von finefine im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.10.2005, 13:59
  5. hilfe bei hover effekt
    Von sYco im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 25.06.2004, 20:34

Stichworte

Berechtigungen

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