Dinaminis paveikslėlių kaitaliojimas CSS pagalba (rollover – angl.)

HTML

Sukuriame nuorodos elementą, kuriam kaitaliosime foninį paveiksliuką:

<a href="#" id="saulegraza"></a>

Paaiškinimai:
href="#" — laikina nuoroda
id="saulegraza" — suteikiame nuorodai id

CSS

Priskiriame stilių elementui:

#saulegraza {
	display: block;
	width: 58px;
	height: 58px;
	background: transparent url(css-rollover-images/saulegraza-off.jpg) no-repeat 0px 0px
}
#saulegraza:hover {
	background-image: url(css-rollover-images/saulegraza-on.jpg)
}

Paaiškinimai:
#saulegraza – identifikuojam, kurio elemento stilius aprašomas
display: block; – suteikiame a elementui block išvaizdą
width: 58px; height: 58px; – nustatome bloko dydį (būtent tokio dydžio yra paveikslėlis)
background – fono nustatymai:
transparent – fono spalva (bespalvė)
url(css-rollover-images/saulegraza-off.jpg) – foninio paveikslo adresas
no-repeat – foninio paveiksliuko nereikia atkartoti (nedarom „tapetų“)
0px 0px – foninio paveiksliuko pozicionavimas atitinkamai nuo kairės ir nuo viršaus (galimi kitokie užrašymai, pvz., center top ir pan.)

#saulegraza:hover – elemento stilius, kai bus užvestas pelės žymeklis
background-image – nurodome kito paveikslėlio adresą:
url(css-rollover-images/saulegraza-on.jpg)

CSS

Naujas elemento stilius:

#saulegraza {
	display: block;
	width: 58px;
	height: 58px;
	background: transparent url(css-rollover-images/saulegraza.jpg) no-repeat 0px 0px
}
#saulegraza:hover {
	background-position: -58px 0px;
}

Paaiškinimai:
url(css-rollover-images/saulegraza.jpg) – naujo foninio paveikslo adresas
background-position:-58px 0px; – fono padėtis užvedus pelės žymeklį („nustumiam kairėn“).

HTML

Sukurkime nuorodų sąrašą – tai ir bus mūsų įrankių juosta:

<ul id="irankiai">
	<li><a href="#" id="i1" title="pirmas">pirmas</a>
	<li><a href="#" id="i2" title="antras">antras</a>
	<li><a href="#" id="i3" title="trečias">trečias</a>
	<li><a href="#" id="i4" title="ketvirtas">ketvirtas</a>
</ul>

Paaiškinimai:
ul – naudosim nenumeruotą sąrašą
id="irankiai" – sąrašui priskiriam identifikatorių
href="#" – laikinas nuorodos adresas. Įrašykite savo.
id="i1"...id="i4" – priskiriame unikalius identifikatorius kiekvienam įrankiui
title="..." – įrankio pavadinimas, matomas mygtuko etiketėje
pirmas...ketvirtas – įrankio pavadinimas

CSS

Įrankiams / nuorodoms suteiksime „padoresnę“ išvaizdą.
Sąrašo elementų stilius:

ul#irankiai li {
	list-style-type: none;
	display: block;
	float: left;
	border: 1px solid gray;
	margin: 0 4px;
	padding: 0
}

Paaiškinimai:
ul#irankiai li – aprašysim sąrašo elementų stilių
list-style-type: none; – nenaudosime stiliaus tipo
display: block; – kiekvienam elementui priskiriame blokinį išdėstymą
float: left; – elementus susirikiuojam į eilę
border: – uždedam rėmelius: 1px – storis, solid – ištisinis, gray – pilkas
margin: – paraštė (išorinis atitraukimas): 0 – vertikalioji, 4px – horizontalioji.
padding: 0 – užpildymas (vidinis atitraukimas)

Nuorodų bendrasis stilius:

ul#irankiai li a {
	display: block;
	width: 32px;
	height: 32px;
	overflow: hidden;
	text-indent: -100px;
	background: transparent url(css-rollover-images/toolbar.gif) no-repeat 0px 0px;
}

Paaiškinimai:
display: block; – kiekvieną nuorodą atvaizduosime blokiniu išdėstymu (todėl galėsime suteikti matmenis)
width: 32px; height: 32px; – plotis ir aukštis atitinkamai. Būtent tokio dydžio yra mūsų piktogramos
overflow: hidden; – jei nuorodos elemento turinys (šiuo atveju – tekstai „pirmas“, „antras“,...) viršys leistinus „gabaritus“ (32x32 px), slėpsime „išsikišančias“ dalis. Žr. sekančio atributo išaiškinimą:
text-indent: -100px; – smarkiai atitraukiam nuorodos tekstą „į kairę“, taip, kad jis tampa nematomas. Ir įrankių juostoje „nesipainios“, ir paieškos sistemos „patenkintos“.
background: – aprašome foną:
transparent – spalva (skaidri)
url(css-rollover-images/toolbar.gif) – foninio paveikslėlio adresas
no-repeat 0px 0px; – foninio paveikslėlio atvaizdavimas: nekartojamas, 0px atitraukimas nuo kairės, 0px atitraukimas nuo viršaus

Foninio paveikslėlio pozicijos kievienam elementui:

ul#irankiai li a#i1 { background-position: 0px 0px }
ul#irankiai li a#i2 { background-position: -32px 0px }
ul#irankiai li a#i3 { background-position: -64px 0px }
ul#irankiai li a#i4 { background-position: -96px 0px }
ul#irankiai li a#i1:hover { background-position: 0px -32px }
ul#irankiai li a#i2:hover { background-position: -32px -32px }
ul#irankiai li a#i3:hover { background-position: -64px -32px }
ul#irankiai li a#i4:hover { background-position: -96px -32px }

Paaiškinimai:
Kaip matote, visiems įrankių juostos elementams naudojame tą patį paveikslėlį:

tik skirtingą jo vietą.