Taustakuvien käyttö valikoissa on lisääntynyt huomattavasti. Kuvat ohjaavat linkin kohteesta saatavaa mielikuvaa ja houkuttelevat klikkaamaan. Valikoidenkin suunnittelussa on kuitenkin otettava ulkoasun lisäksi huomioon, että jokainen taustakuva vaatii erillisen HTTP-pyynnön palvelimelle ja kun kuvia on paljon, sivun latausaika kasvaa nopeasti. Tämä artikkeli kertoo, kuinka rakentaa CSS-navigaatio yhdestä ainoasta taustakuvasta ja nopeuttaa latausaikaa.

Tarvittavat elementit

Taustakuva

Olen tätä esimerkkiä varten luonut kuuden pienemmän kuvan sijasta yhden taustakuvan (225*50), jonka asettelua muuttamalla luodaan valikon eri osat ja perinteiset (hiiri kuvan päällä – hiiri poissa) toiminnot.

HTML

Luodaan perinteinen järjestelemättömään listaan pohjautuva valikko ja nimetään listan yksittäiset osat kutakin osaa kuvaavalla nimellä.

<ul id="valikko">
<li id="blogi"><a href="#" title="blogi">Blogi</a></li>
<li id="palvelumme"><a href="#" title="Palvelumme">Palvelumme</a></li>
<li id="lataukset"><a href="#" title="Lataukset">Lataukset</a></li>
</ul>

CSS

Luodaan tyylitiedostoon valikon yleiset tyylimäärittelyt (mitat, taustaväri ja asettelu), sisennetään linkin teksti pois näkyvistä ja asetellaan taustakuva sopivaan kohtaan listan eri osien tyylimäärityksissä.

Liikuttamalla taustakuvaa vaakasuunnassa saadaan näkyviin listan eri osien taustat ja pystysuunnassa tapahtuvalla liikkeellä saadaan aikaan hover (hiiri linkin päällä)-toiminto.

 #valikko {

 width:245px;

 list-style:none;

 background:#000000;

 margin:0px;

 padding:0px;

 clear:both;

 float:left;

 line-height:0px;

}

#valikko li{

 padding-left:5px;

 float:left;

}

#valikko li a{

 height: 25px;

 min-width:63px;

 display:block;

 float:left;

 text-decoration:none;

 text-indent: -9000px;

 background:#000000 url(navbar.gif) no-repeat;

}

#valikko #blogi a{

 width:63px;

 background-position:0px 0px;

}

#valikko #blogi a:hover{

 background-position:0px -25px;

}

#valikko #palvelumme a{

 width:81px;

 background-position:-63px 0px;

}

#valikko #palvelumme a:hover{

 background-position:-63px -25px;

}

#valikko #lataukset a{

 width:81px;

 background:#000000 url(navbar.gif) -144px 0px;

}

#valikko #lataukset a:hover{

 background:#000000 url(navbar.gif) -144px -25px;

}

Lopputulos (demo)

Käytettäessä yhtä taustakuvaa, palvelimelle lähetettävien pyyntöjen määrä laskee kuudesta yhteen ja taustakuvan koko verrattuna kuuteen pienempään kuvaan jää selvästi pienemmäksi. Sivun latausaika nopeutuu, eikä esimerkiksi Google pääse rankaisemaan hitaasti latautuvasta sivusta.