pondělí, 28. leden, 2008
Kategorie: CSS

Jednoduché tlačítko v css 2

Jistě jste si všimli, že minulé tlačítko nejprve načetlo obrázek, které mělo na pozadí a potom, když jste na něj najeli, načetl se i obrázek pro rollover. To je pro větší obrázky nevýhodou, protože při najetí myši na tlačítko musíte chviličku čekat než se rollover načte. Řeší to následující příklad.

#business a {
text-align: center;
padding: 11px 0 0 0;
height: 33px;
width: 152px;
display: block;
color: #fff;
text-decoration: none;
background: url(button.jpg) no-repeat left 0px;
}

#business a:hover {
background-position: left -44px;
color: #fff;
text-decoration: none;
}

Koukněte se na hotový příklad.

A nakonec malé vysvětlení pro ty, kteří se neztotožní pouze s css kódem. Obrázek tlačítka a zmáčknutého tlačítka (každý o rozměrech 152×44 px) je v jednom obrázku o rozměrech 152×88 px. Při najetí na původní tlačítko se pozadí posune o výšku jednoho tlačítka a zobrazí tak předtím skryté pozadí, které však již bylo celé načtené.