Sonntag, September 11

 

Hover Button optimiert

Es gibt viele Anleitungen, wie man mit CSS animierte Buttons macht. Diese Methode hat einen kleinen Nachteil. Wenn der Besucher zum ersten Mal über so einen Knopf fährt, braucht der Browser einen Moment, bis das zweite Bild nachgeladen ist. Das kann man verbessern.

Der Trick ist die beiden Knöpfe in ein Bild zu packen und dann das Bild zurecht zu schieben.Das ist ein Bild mit den zwei Knöpfen. 42 Pixel hoch, also 21 Pixel pro Knopf.
#nav a {height: 21px; background: url("doublebutton.gif") 0px 0px no-repeat;}
#nav a:hover {background-position: 0px -21px;}
Der Trick ist pink markiert. Die Grafik beginnt nun sozusagen 21 Pixel über dem Knopf, wird aber nur im Knopf angezeigt. Also sieht man nur die untere Hälfte. Es ist auch wichtig die Höhe (height) anzugeben, damit nicht aus Versehen etwas abgeschnitten oder zuviel angezeigt wird.

Übrigens sollte man noch width: 108px, padding-left: 20px; display: block; angeben, damit es wirklich richtig angezeigt wird.

Kommentare

Anonymous money sagte:
Cool Blog Here! I have a pixel web site If want to promote your web site on my http://www.pixelhurricane.com website the cost is $497.00 for a 100 block of pixels but it will get your site listed in the top of the search engines. money
 
Anonymous Anonym sagte:
Wonderful and informative web site. I used information from that site its great. »
 
Kommentar abgeben

<< Hauptseite