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

http://sum.lt/straipsniai/css-rollover.php

Kur naudojama. Kodėl CSS metodas yra geriau už JavaScript'u pagrįstą. Kodo pavyzdžiai. Kuriame mygtukus svetainės navigacijai – įrankių juosta.

Kur naudojama arba „roloveriai vež“

Naršydami interneto platybėse tikriausiai ne kartą matėte efektingus mygtukus, kai ant jų nuvedus pelės žymeklį mygtuko išvaizda pasikeičia. Dažniausia tai būna realizuota JavaScript'o pagalba (onMouseOver). Tokiu atveju mygtukui yra naudojamas paveikslėlis, kuris pelės žymekliui pasiekus aktyvią zoną akimirksniu pakeičiamas kitu. Kad paveikslėlių pasikeitimas neužtruktų, naudojamas išankstinis jų pakrovimas į atmintį. Kai kurios svetainės to nenaudoja ir jose galime pastebėti pasikeitimo užlaikymą.

Tačiau paveikslėlių pakeitimą galima realizuoti ir be JavaSript'o – vien tik CSS :hover pagalba.

CSS vs JavaScript

Kodėl šiuo atveju CSS būdas yra geriau nei JavaScript'u pagrįstas:

  • mažiau kodo ir žymiai paprastesnis „programavimas“
  • nereikalingas išankstinis paveikslėlių pakrovimas į atmintį
  • mažiau paveikslėlių – galima naudoti vieną vienintelį paveikslėlį
  • veiks lankytojams atjungusiems JavaScript'o veikimą naršyklėje
  • paprastas svetainės stiliaus / dizaino pakeitimas ateityje (redaguojamas tik vienas CSS failas)
  • greičiau pakraunama (vienas paveikslėlis pakraunamas greičiau nei du perpus mažesni)
  • patogiau spausdinant – foniniai paveikslėliai dažniausiai nespausdinami

Sprendimas

Mūsų pavyzdžiui panaudosiu šiuos du paveikslėlius:

gėlė gėlė

Pirmasis bus atvaizduojamas „normalioje“ būklėje, kai pelės žymeklis neliečia paveikslėlio; antrasis – kai žymeklis palies paveikslėlį.

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)

Rezultatas

Užveskite pelės žymeklį ant paveiksliuko:

Patobulinimai

Mūsų sprendimą galime patobulinti apjungdami abu paveiksliukus į vieną; tik elemento :hover būklėje keisdami foninio paveiksliuko padėtį.

gėlė

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“).

Rezultatas

Užveskite pelės žymeklį ant paveiksliuko:

Įrankių juosta. Kodas

Vadovaudamiesi aukščiau išdėstytais principais sukurkime stilizuotą įrankių juostą, kuri galės būti lengvai adaptuojama jūsų svetainės navigacijai ir pan.

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į:
įrankių juosta
tik skirtingą jo vietą.

Įrankių juosta. Rezultatas

Šis mūsų pavyzdys yra abstraktus – jo pagrindu galima kurti nuosavus mygtukus, navigacijos meniu, savas įrankių juostas.