CSS Spray jeb sakombinēts fona attēls

Domājams, daudzi būs dzirdējuši par CSS spraitiem, tomēr, domājams, ne visi zin, kas tas tāds ir un kā to izmantot. CSS spraiti ir vairāki atšķirīgi attēli, kuri apvienoti vienā kopīgā, veselā attēlā. Šis attēls tiek uzstādīts kā fons (background) div-blokam, vai jebkuram citam elementam, ar noteiktu augstumu un platumu. Ar parametra background-position palīdzību mēs pozicionējam mūsu attēlu tā, lai tas izskatītos kā viens konkrēts attēls. Uzskatāmības dēļ, lūk piemērs. Pieņemsim, ka mums ir attēls-saite un mums nepieciešams, lai uzvedot peles kursoru uz šīs bildes, tā mainītos.

Kods:

<a href="http://forum.epit.lv" target="_blank" title="Viss vienā forumā - Forum.epit.lv" class="forum-epit"> </a>
<style>a.forum-epit { display:block; width:88px;  height:31px; background:url('/css-pamacibas-no-markus/banner-spry.png') left top;} a.forum-epit:hover {background-position:left 31px;}</style>

Izmantotais attēls:

Tātad kā jau var saprast mēs izveidojam tikai divus a stilu kategorijas:

vienkārši a.forum-epit
un a.forum-epit:hover
Vienkāršajā mēs norādam to ka šis links tiks attēlots kā blokas + tā garums būs 88 px un platums 31px(bet attēls bums ir 88x62 px) left top; norāda to ka tiks izmantota attēla lab''as puses aukšabet hoverā tiek likts tikai fona pozīcija Demo šeit: http://forum.epit.lv/css-pamacibas-no-markus/spray.html

Avots;
http://ucozwebmeistars.ucoz.lv/forum/90-2504-1