Artikel nach Markierung anzeigen: hover
Samstag, den 04. Juni 2011 um 12:36 Uhr

Ein Div mit Link und Rollover versehen

Es kommt öfters die Frage wie man ein Div mit einem Link und einen Rollover versehen kann. Dies ist im Grunde genommen ganz einfach. Im Beispiel nehmen wir einen link zu google.

Ins Template oder ins Modul schreiben wir dies:

<a target="_blank" href="http://google.de" class="google">

 

Der passende CSS Code ins Template.css oder wo auch immer hin:

.google{float:left;margin:0 10px;height:32px;width:32px;background:url(NORMAL-BILD-URL);}
.google:hover {float:left;margin:0 10px;height:32px;width:32px;background:url(HOVER-BILD-URL);}

 

In diesem Fall hat das Bild eine Breite und Höhe von 32Pixel. Müsste ggf. angepasst werden. Float Left bewirkt, das die Bilder wenn es mehrere sind, nebeneinander dargestellt werden. Der margin:0 10px bewirkt einen Abstand oben & unten von 0 Pixel und einen Abstand links und rechts von 10 Pixel.

Veröffentlicht in Allgemein Themen

Copyright 2011 Templateauskunft.de Christopher Gerbig | Impressum