Martin Koksrud Bekkelund

Martin Koksrud Bekkelund

Teknologi • Samfunn • Politikk

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:

  1. Med JavaScript
  2. Med CSS og to forskjellige bilder
  3. 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>:

  1. <div id=»beholder»>
  2. <a href=»#»></a>
  3. </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>:

  1. div#beholder a {
  2. display: block;
  3. width: 800px;
  4. height: 533px;
  5. background-image: url(bilde.jpg);
  6. }
  7.  
  8. div#beholder a:hover {
  9. background-position: 0 533px;
  10. }

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! :-)

Martin skriver regelmessig om hvordan teknologi, samfunn og politikk påvirker hverandre. Dersom du er interessert i å følge med på hva Martin skriver, finnes det flere måter å holde deg oppdatert på. Les mer...

Flere artikler

Enda flere artikler? Besøk arkivet.

Martin Koksrud Bekkelund

Martin Koksrud Bekkelund

Bekkelund.net er Martin Koksrud Bekkelund sitt private nettsted, hvor han skriver om samspillet mellom teknologi, samfunn og politikk. Martin arbeider til daglig som direktør for produkt- og forretningsutvikling i et av Norges største selskaper. Les mer...

Følg Martin

Facebook Twitter Instagram LinkedIn GitHub SlideShare Martin Koksrud Bekkelunds RSS-kanal

Søk

© 1995-2016 Martin Koksrud Bekkelund
OpphavsrettRSS og abonnementKontakt