Kumpikin alla näkyvä kuva käyttää samaa kuvatiedostoa.
Molemman esimerkkikuvan leveys ja korkeus on vakio, 200 kuvapikseliä. Kuvien taustakuva on molemmissa esimerkeissä sama. CSS:n (Cascading Style Sheets) avulla määritellään näytettäväksi tietty osa esimerkkien yhteisestä kuvatiedostosta. Yhteisen kuvatiedoston leveys on 200 ja korkeus 400 kuvapikseliä.
Perin yksinkertainen on CSS-merkkaus tämän toiminnon toteuttamiseksi. CSS:llä on mahdollista ilmoittaa kuvan asemoiminen vertikaalisessa ja horisontaalisessa suunnassa. Ensimmäisessä esimerkissä CSS-merkkaus on seuraavanlainen:
#taustakuva1 { background: url(images/livevil.png) no-repeat 0 0; }
Toista esimerkkikuvaa varten laitetaan näkyville toinen puolisko kuvatiedostosta, joka siis tapahtuu näin:
#taustakuva2 { background: url(images/livevil.png) no-repeat 0 100%; }
Kuten on huomattavissa ja todettavissa, käytetään kummassakin esimerkissä todella samaa kuvatiedostoa (livevil.png). Ensimmäisessä kuvassa näytetään molempien kuvien yhteisestä kuvatiedostosta yläosa ja toisessa esimerkissä yhteisen kuvatiedoston alaosa.
Alapuolella näkyvään linkkiin on liitetty hover -efekti.
Tähän esimerkkiin (Kuva 3) on toteutettu hover -efekti. Koko esimerkin kuva-alue on linkki. Kun hiiren osoitin (kursori)
viedään linkin päälle, tulee silloin näkyviin samasta kuvatiedostosta eri osa.
Tämän hoveroinnin luominen onnistuu seuraavanlaisella (X)HTML-merkkauksella:
<ul id="linkitetty">
<li><a href="#">Teksti tulee tähän</a></li>
</ul>
...ja CSS-merkkaus näyttää tältä:
#linkitetty {
list-style: none;
padding: 0;
margin: 0;
display: inline;
}
#linkitetty li {
margin: 40px 20px;
display: block;
height: 200px;
width: 200px;
border: 3px solid #333;
float: left;
text-align: right;
color: #FFF;
font: 900 1.15em "Trebuchet MS", Helvetica, Arial, sans-serif;
}
#linkitetty li a {
background: url(images/livevil.png) no-repeat 0 0;
}
#linkitetty li a:hover {
background: url(images/livevil.png) no-repeat 0 100%;
}
Tässä esimerkissä on käytössä active -efekti.
Kun hiiren osoitin viedään esimerkin (Kuva 4) päälle ja kuva-alue tehdään aktiiviseksi (klikkaamalla todennäköisesti), tulee silloin näkyviin saman kuvatiedoston eri osa.
