Hier ein kleines CSS Snippet, was man sicher öfter mal gebrauchen kann. Mit diesem Snippet erreicht man ein simples Imgage-RollOver, wo das Bild durch ein anderes ausgetauscht wird, wenn man mit der Mouse drüber fährt. Einfach deshalb, weil man sonst immer nur Beispiele mit fetten Javascriptcode findet, wenn man das mal braucht…

 

1
<a title="Facebook" class="img_rollover" href="http://www.facebook.com/MarioPriebe"></a>
1
2
3
4
5
6
7
8
9
10
/*CSS für ImageRollOver  */
a.img_rollover:link, .img_rollover{
	width:32px;
	height:32px;
        display:block;
	background-image:url(images/icon32_facebook_off-2.png);
}
a.img_rollover:hover{
	background-image:url(images/icon32_facebook_on.png);
}

Möchte man mehrere Icons / Images nebeneinander abbilden, setzt man noch ein float:left; in die Definition.

Viel Spaß beim entwickeln : )

Einfaches CSS Image-RollOver ohne Javascript
Markiert in:

2 thoughts on “Einfaches CSS Image-RollOver ohne Javascript

  • November 21, 2010 bei 12:55
    Permalink

    Für Hover-Images empfehle ich dir generell Sprites. Das wirkt sich besser auf Ladezeiten aus und du hast keine Flackern beim Hover.

    Siehe: http://css-tricks.com/css-sprites/

  • November 21, 2010 bei 14:07
    Permalink

    Ja stimmt, da war doch mal was. Bei Sprites wird eben nur ein Bild geladen.. Danke für den Hinweis.

Kommentare sind deaktiviert.