Anzeige

Rollover mit CSS

Rollover mit CSS | PSD-Tutorials.de

Erstellt von Foos, 12.10.2008.

  1. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    Rollover mit CSS
    Hey.
    Ich hab kleine Bilder, die einen weißen Rahmen erhalten sollen, wenn man mit der Maus drüber fährt.
    Aber wie stell ich das mit CSS an? Muss ich da ein "leeres" Bild in der gleichen Größe wie die anderen erstellen und nur den Rahmein weiß färben oder geht das auch anders?
     
    #1      
  2. dage

    dage Noch nicht viel geschrieben

    Dabei seit:
    10.04.2008
    Beiträge:
    21
    Geschlecht:
    männlich
    Rollover mit CSS
    AW: Rollover mit CSS

    müsste doch eigentlich mit einem rahmen zu schaffen sein denk ich. also sowas in der richtung wie:
    Code (Text):
    1. img:hover {border:3px solid white; }
     
    #2      
  3. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    Rollover mit CSS
    AW: Rollover mit CSS

    aja...funkt aber leider nicht...

    also es verändert sich nichts.
     
    #3      
  4. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Rollover mit CSS
    AW: Rollover mit CSS

    poste bitte mal deinen Code weil eigentlich klappt das mit border
     
    #4      
  5. dosonaro

    dosonaro Aktives Mitglied

    Dabei seit:
    12.10.2008
    Beiträge:
    364
    Geschlecht:
    männlich
    Ort:
    Wuppertal
    Software:
    Adobe Photoshop CS4
    Rollover mit CSS
    AW: Rollover mit CSS

    Das währe der code.

    HTML:
    1. <style type="text/css">
    2. <!--
    3. img { border:none; }
    4. img:hover { border:solid 3px #000000; }
    5. -->
    6. </head>
    7. <img src="http://dosin.kilu.de/test/images/joomla.png" alt="test" />
    8. </body>
    9.  


    hier wird er den effekt warscheinlich nicht sehen, da sein background auch weiss ist :D
     
    #5      
  6. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    Rollover mit CSS
    AW: Rollover mit CSS

    das ist mein bild code:

    PHP:
    1. <img src="images/Portfolio/Flyer/flyerthumbrocknightt.jpg" alt="" width="229" height="111" class="imghover" title="bp.jpg" />
    und das mein css:

    PHP:
    1. .imghover
    2. { img:hover {border:3px solid white;
    3. }
     
    #6      
  7. cebylon

    cebylon IBM5120-Oldie

    Dabei seit:
    28.07.2008
    Beiträge:
    920
    Geschlecht:
    männlich
    Ort:
    Niederbayern
    Software:
    ArchiCAD/Artlantis/Adobe
    Kameratyp:
    Canon EOS
    Rollover mit CSS
    AW: Rollover mit CSS

    hast du auch nach der Änderung des CSS-Files F5 gedrückt = aktualisiert ?

    Manchmal muss man auch die temporären Files des Browsers löschen,
    bevor man Änderungen am CSS-File zu sehen bekommt.
     
    #7      
  8. dosonaro

    dosonaro Aktives Mitglied

    Dabei seit:
    12.10.2008
    Beiträge:
    364
    Geschlecht:
    männlich
    Ort:
    Wuppertal
    Software:
    Adobe Photoshop CS4
    Rollover mit CSS
    AW: Rollover mit CSS

    die class ist falsch

    .imghover:hover
    {border:3px solid white;
    }
     
    #8      
  9. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Rollover mit CSS
    AW: Rollover mit CSS

    .imghover
    { img:hover {border:3px solid white;
    }

    ..was macht die Klammer da?
     
    #9      
  10. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Rollover mit CSS
    AW: Rollover mit CSS

    img:hover ist sowieso fraglich,weil der InternetExplorer das inden älteren Versionen nicht unterstützt.
     
    #10      
  11. dosonaro

    dosonaro Aktives Mitglied

    Dabei seit:
    12.10.2008
    Beiträge:
    364
    Geschlecht:
    männlich
    Ort:
    Wuppertal
    Software:
    Adobe Photoshop CS4
    Rollover mit CSS
    AW: Rollover mit CSS

    was hat das mit der klammer zu tun? alles vor der klammer muss weg

    sprich das

    .imghover
    { img:hover { border:3px solid white;
    }

    und so ist es richtig

    .imghover:hover
    { border:3px solid white;
    }

    @
    sokie: wer den IE6 benutzt ist selber schuld meiner meinung nach. wer seinen pc nicht auf den neusten stand hälft, darf sich nicht beschweren
     
    Zuletzt bearbeitet: 12.10.2008
    #11      
  12. Foos

    Foos Member

    1
    Dabei seit:
    31.01.2007
    Beiträge:
    1.034
    Geschlecht:
    männlich
    Software:
    Photoshop, Dreamweaver, Indesign, Illustrator
    Kameratyp:
    Sony A7R/A7S
    Rollover mit CSS
    AW: Rollover mit CSS

    aja super dankeschön....funktioniert...
    das einzige was mich ein klein wenig stört ist, dass sich das bild dann immer ein wenig versetzt. also der rahmen ist da aber das bild verschiebt sich beim hover um 2 - 3 mm nach unten...?!
     
    #12      
  13. dosonaro

    dosonaro Aktives Mitglied

    Dabei seit:
    12.10.2008
    Beiträge:
    364
    Geschlecht:
    männlich
    Ort:
    Wuppertal
    Software:
    Adobe Photoshop CS4
    Rollover mit CSS
    AW: Rollover mit CSS

    das bild verschiebt sich, wegen den 3px border der kommt, wenn man drüber fährt ;)
     
    #13      
  14. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Rollover mit CSS
    AW: Rollover mit CSS

    da musst du die Border beim Hover durch Padding ausgleichen
     
    #14      
  15. dosonaro

    dosonaro Aktives Mitglied

    Dabei seit:
    12.10.2008
    Beiträge:
    364
    Geschlecht:
    männlich
    Ort:
    Wuppertal
    Software:
    Adobe Photoshop CS4
    Rollover mit CSS
    AW: Rollover mit CSS

    genau. der code währe dann z.B

    Code (Text):
    1. <head>
    2. <style type="text/css">
    3. <!--
    4. img { border:none; padding:1px; }
    5. img:hover { border:solid 1px #000000; padding:0px;}
    6. -->
    7. </style>
    8. </head>
    9. <body>
    10. <img src="http://dosin.kilu.de/test/images/joomla.png" alt="test" />
    11. </body>
    12.  
     
    #15      
  16. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Rollover mit CSS
    AW: Rollover mit CSS

    So zu denken kann sich natürlich jeder Anwender leisten. Wenn man Webseiten schreibt, die eine breite Besucherschicht ansprechen sollen, wird man diese ~20% nicht ausser acht lassen wollen. Und ich denke darum geht es hier.

    Die Frage stellt sich aber überhaupt nach dem Sinn dieses img:hover. Warum sollte man einen hover Effekt auf ein img legen? Niemand bewegt einen Mauszeiger über ein Bild, nur um einen Bilck auf den enstehenden Rahmen zu werfen?!..

    __________
    edit:
    grad erst gesehen: WebHits gibt dem IE6 sogar um die 43%. (für mich Grund genug, das mit zu bedenken)
     
    Zuletzt bearbeitet: 12.10.2008
    #16      
x
×
×
teststefan