Moze se upotrebiti trick postizanja rollover-a sa samo jednom slikom (koja se na startu ucita).
Primer.
Naime, zeljene slike (original i rollover) su sirine 120px i visine 60px.Nameste se jedna pored druge, cime ukupna duzina iznosi 240px, dok je visina nepromenjena.
Zatim pomocu pseudo-klasa se definise pozadina koju reprezentuje leva polovina, dok :hover aktivira desnu polovinu iste slike, tako da se rollover efekat postize pomeranjem slike ulevo.
Napomena: u <a> odeljku nema <img> elementa.
html
Code:
<a href="link.html" class="rollover">naziv_slike</a>
css
Code:
.rollover {
display: block;
width: 240px;
height: 60px;
background-image: url(rollover.gif);
background-repeat: no-repeat;
text-indent: -9999px;
}
a.rollover:link, a.rollover:visited, a.rollover:active {
background: url(rollover.gif) no-repeat;
}
a.rollover:hover {
background-position: -120px 0;
}