Veliko spletnih mest uporablja efekt zamenjave slike ob prehodu kazalca miške. Največkrat za ta ukaz uporabljamo JavaScript. Zelo enostavno je namreč napisati “scripto”, ki zamenja sliko ob prehodu kazalca miške. Ta metoda pa lahko povzroči tudi kakšno težavo zato se veliko spletnih ustvarjalcev zateka k CSS metodi. CSS metoda naredi enak efekt samo z uporabo CSS ukazov.
SLIKA
Največja razlika med JavaScript sliko in CSS sliko je slika sama. Pri metodi CSS je slika, ki je prikazana in slika, ki se prikaže vsebovana v isti datoteki. Imamo sliko, ki jo obrežemo in prikažemo samo obrezan del, ki ga nato zamenjamo z drugim delom.
Za uporabo te motode ne bomo uporabili <IMG> značke, ampak značko <div> in atribut “background”.
Primer slike:
HTML
Zgoraj je prikazana slika, ki ima obe sliki v eni sami datoteki. Da dosežemo prikaz polovice datoteke bomo sliko dodelili, kot “background” HTML elementu DIV. Primer HTML kode:
<div class="CSS-slika"> </div>
CSS
Kot ste videli je HTML del precej enostaven, saj smo elementu DIV dodelili samo razred – “class”. Vse ostalo naredimo v CSSju.
.CSS-slika { width: 100px; height: 100px; background: url('/pot/pomagalnik-css.gif') no-repeat; background-position: 0 -100px; }
.CSS-slika:hover { background-position: 0 0; }
Uporabimo CSS metodo “hover”, ki ob prehodu miškinega kazalca preko DIV polja, zamenja oziroma prestavi sliko. Za premik slike smo uporabili metodo “background-position”. Ta metoda je enostavna, hitra in uporabna. Metoda zahteva manj prostora na strežnikih, prenaša se manj podatkov in starejši računalniki lažje prikazujejo elemente.
Rezultat
Gume
Podoben sistem uporabljamo za kriranje dinamičnih gumbov, kjer se sredina (text) spreminja, torej dolžina gumba. Gumb je sestavljen iz treh delov, desni in levi zaobljen del, ter sredinski del, celotna zadeva pa je v eni grafični datoteki.
String
Tole NE deluje v IE6. Vsaj ne na div ali button. :)
Deluje pa na Slika, prav tako pa tudi v ostalih browserjih.
Jiga
Imel si prav v IE6 ni delovalo. Popravil sem kodo, tako da deluje tudi v IE6. Dodal sem še povezavo.
Koda CSS:
.CSS-slika a { width: 100px; height: 100px; background: url(‘pomagalnik-css.gif’) no-repeat; background-position: 0 -100px; background-color:#000000; display:block; }
.CSS-slika a:hover { background-position: 0 0; }
.CSS-slika a span { visibility:hidden; }
Koda HTML:
<div class=”CSS-slika”><a href=”http://www.jiga.org” target=”_blank” rel=”nofollow”><span></span></a></div>