Standardbasert hover-funksjonalitet for bilder

20.12.06

I forbindelse med billedgalleriet på Greatest Bits, så jeg behov for en standardbasert hover-funksjonalitet for bilder. Hensikten er å vise brukeren forskjellen på to bilder ved å føre musepekeren over bildet. Før musepekeren føres over bildet, vises ett bilde. Når musepekeren føres over (hover) vises et annet bilde. Årsaken til at jeg ønsket meg dette var for å vise forskjellen på to forskjellige billedkomprimeringsgrader. Dette kan umiddelbart løses på tre måter:

Med JavaScript
Med CSS og to forskjellige bilder
Med CSS og ett bilde

Jeg har valgt å bruke alternativ tre av følgende årsaker:

JavaScript er ikke en webstandard.
I de fleste nettlesere (unntatt Opera, tror jeg) lastes først det andre bildet i det hover-pseudoklassen blir aktiv. Det vil si at i det man fører musen over bildet, starter lastingen av det andre bildet. Er bildene store kan dette ta litt tid.
Store bilder i hover-effekter i Internet Explorer er ikke spesielt gunstig, da bildene ofte flakker litt.

XHTML

Du trenger et blokkelement som beholder, eksempelvis en <div>:

<div id=”beholder”>
<a href=”#”></a>
</div>

Det er vesentlig at du benytter unike identifikatorer, dersom du planlegger flere bilder på en side. Hva du velger å kalle identifikatorene spiller ingen rolle.

CSS

Bildet du skal vise heter bilde.jpg og er et bilde sammensatt av to bilder. I mitt tilfelle et ukomprimert og et komprimert. I eksemplet under er bilde.jpg 1066 piksler høyt, altså dobbelt så høyt som beholderen. I <head>-elementet på siden skal du putte inn følgende CSS mellom <style type="text/css"> og </style>:

div#beholder a {
display: block;
width: 800px;
height: 533px;
background-image: url(bilde.jpg);
}
div#beholder a:hover {
background-position: 0 533px;
}

Jeg har publisert en eksempelside i CSS-seksjonen. I tillegg kan du ta en titt på bildet jeg benytter.

Om dette er den absolutt beste måten å løse denne problemstillingen på, vil jeg invitere deg til å svare på. Legg igjen en kommentar! :-)

Foto WWW

Som leser kan du gi et bidrag til produksjonen, til driften og til å skaffe utstyr til testing for å sikre regelmessige, uavhengige artikler, tester og vurderinger av høy kvalitet.

Gi et bidrag

Husk å abonnere på nyhetsbrevet, det er gratis og du får alle artikler rett i innboksen.

Nyeste artikler

Enda flere artikler? Besøk arkivet.

Om Martin

Dette er Martin Koksrud Bekkelund sitt private nettsted, hvor han skriver om forbrukerteknologi, teknologiledelse og hvordan teknologi, samfunn og politikk påvirker hverandre. Martin er innehaver av konsulentselskapet Nivlheim. Les mer...

Martin Koksrud Bekkelund