kostenloser Webspace werbefrei: lima-city

CSS hover bei Bildern?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   tuvok

   tuvok hat kostenlosen Webspace.

   22:06, 19.10.2004

   Wie macht man das das wenn ich ein normales tag/bild">Bild habe und mit der maus dar?ber fahre ein anderes angezeigt wird? (der code w?re hilfreich :) )
   
   Ich wei? das es mit css geht, hab aber auf selfhtml nichts gefunden... wahrscheinlich falsch gesucht.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. schrotti12

   Moderator

   schrotti12 hat kostenlosen Webspace.

   22:36, 19.10.2004

   Also, 1. das geht dann aber nur bei Mozilla oder anders gesagt:
   Beim IE gehts nicht!!
   
   Das ganze kann man meines Wissens auch nur mit
   "background-image: url(...);" machen...
   
   Also (So w?rds ich l?sen!!!):
   
   Annahme:
   
   Bildgr??e: 200px x 200px
   
   dann im html-code:
   
   <div class="bild"> &nbsp;? </div>
   
   im css:
   
   div.bild {width: 200px; height: 200px; background-image: url(Pfad zum Bild);}
   
   div.bild:hover {width: 200px; height: 200px; background-image: url(Pfad zum Alternativ-Bild);}
   
   ImInternet-Explorer geht das NUR mit Links... alle anderen Elemente werden nicht erkannt... Leider...
   
   Beitrag ge?ndert am 19.10 22:37 von schrotti12

4. a********a

   22:54, 19.10.2004

   Das geht auf viele Weisen:
   
   HTML4 und CSS3:
   

   <a href="#"><img src="bild.jpg" alt="Ersatztext"><img src="bild_hover.jpg" alt=""></a>

   
   

   a img:first-child {display:inline;}
   a img:last-child {display:none;}
   a:hover img:first-child {display:none;}
   a:hover img:last-child {display:inline;}

   
   
   HTML4 und CSS2:
   

   <a href="#"><img src="bild.jpg" alt="Ersatztext"><img src="bild_hover.jpg" alt=""></a>

   
   

   a img:first-child {display:inline;}
   a img {display:none;}
   a:hover img:first-child {display:none;}
   a:hover img {display:inline;}

   
   
   HTML4 und CSS1:
   

   <a href="#"><img src="bild.jpg" class="normal" alt="Ersatztext"><img class="hover" src="bild_hover.jpg" alt=""></a>

   
   

   a img.normal {display:inline;}
   a img.hover {display:none;}
   a:hover img.normal {display:none;}
   a:hover img.hover {display:inline;}

   
   
   HTML4 und JavaScript:
   

   <img src="bild.jpg" alt="Ersatztext" onMouseOver="this.src='bild_hover.jpg'" onMouseOut="this.src='bild.jpg'">

   
   
   F?r XHTML m?ssen jeweils die Endtags f?r <img> gesetzt werden.
   
   EDIT: Code-Tags entfernt. Die BBCode-Funktion m?sste mal jemand ?berarbeiten
   
   Beitrag ge?ndert am 19.10 22:56 von antarctica
5. Autor dieses Themas

   tuvok

   tuvok hat kostenlosen Webspace.

   11:39, 20.10.2004

   Danke f?r die Hilfe :)
   
   Obwohl ich kein Freund von Javascript bin werde ich es wohl trotzdem nehmen da es das einzige ist das hier mit Opera, Ie, Mozilla und Firefox (bei aktiviertem js nat?rlich) richtig dargestellt wird.
   
   Mit CSS funktioniert es zwar mit Opera, Mozilla und Firefox der ie bockt aber :( oder hab ich was falsch gemacht?

6. schrotti12

   Moderator

   schrotti12 hat kostenlosen Webspace.

   11:55, 20.10.2004

   nein hast du nicht...
   
   der IE unterst?tzt :hover nur bei Links...
   Bei allem anderen kannst es vergessen...
   Iss zwar ?rgerlich, aber was soll man machen...

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?