Dinaminis paveikslėlių kaitaliojimas CSS pagalba (rollover – angl.)
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:
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į.
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į:
tik skirtingą jo vietą.
Įrankių juosta. Rezultatas
Šis mūsų pavyzdys yra abstraktus – jo pagrindu galima kurti nuosavus mygtukus, navigacijos meniu, savas įrankių juostas.
- Visi straipsniai
- CSS rollover
Strict DTD ir target
Maskuojam adresus
Išlendantis DIV
- Turite klausimų ar žinote, kaip padaryti geriau? Pasiūlymai visada laukiami.