nabito.net

Včera jsem tvořil pěkné grafické tlačítko za pomocí CSS a HTML. Myslím si, že by se to mohlo někomu hodit.

Nejpreve je nutné navrhnout grafickou podobu tlačítka – viz níže. Následující obrázek je jeden kus, i když to tak možná nevypadá.

Pokud chci tlačítko 32×32 musím vytvořit obrázek 64×32 (jedna polovina se bude zobrazovat po přejetí myší). Pro definici stylu tlačítka použiji následující CSS :

a.next
{
display:block;
width:32px;
height:32px;
background:white url(„./next.png“) 0px 0px;
line-height:0px;
font-size:0px;/FF/
text-decoration:none;
content:';/OPERA/
}
a:hover.next
{
background:white url(„./next.png“) 32px 0px;
}

Posun obrázku na pozadí je realizován čistě pomocí CSS (background). Velikost písma jsem nastavil na 0, aby nebylo vidět, ale bylo tam – pro čtečky a textové prohlížeče.

Jelikož je obrázek tlačítka jeden kus nedochází k blikání v důsledku stahování dalšího obrázku, jako k tomu dochází v případě použití JavaScriptu.

Do HTML pak stačí nějakému odkazu přiřadit třídu class=„next“, toť vše.