Standardbasert hover-funksjonalitet for bilder

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

Dato: Onsdag 20. desember 2006
Kategorier: Foto • WWW
RSS: Abonner på kommentarer til denne artikkelen eller nye artikler fra Martin
Trackback: Du kan legge igjen trackback fra din egen side.

6 kommentarer til «Standardbasert hover-funksjonalitet for bilder»

  1. Espen Andersson
    20. desember 2006 klokken 21:11

    Teknikken du har valgt å gå for er nok det nærmeste man kommer en optimal løsning, selv om den har en åpenbar svakhet: Man laster unødvendig mye data og ikke bare det som vil bli brukt. Om brukeren ikke holder musepekeren over samtlige bilder som har denne hover-effekten, vil man ha lastet unødvendig mye data, men det er likevel ikke noe stort problem.

    Forøvrig kan vel koden din forenkles litt, kan den ikke? Om hvert av bildene eksempelvis er 250px høye, så vil den totale høyden bli på 500px. Da kan du like godt sette høyden på layeret til å være 250px og så bare bruke background-position: bottom ved hover.

    Dette er en kommentar

  2. Christian
    21. desember 2006 klokken 0:05

    rett og slett flink du ;D

    Dette er en kommentar

  3. Martin
    21. desember 2006 klokken 0:49

    Du har helt rett i at man laster unødvendig mye data, Espen. Spesielt i mitt tilfelle, hvor hele bildet er 557 KB. Sånn sett er alternativ to det beste, men da oppstår ulempene jeg beskriver med etterlasting og flikking i IE. I behovet jeg beskriver vil jeg nok allikevel hevde at alternativ nummer tre er det beste, da man faktisk skal benytte det i en artikkel.

    Ellers er det riktignok rett frem for å sette background-position: bottom ved hover, så slipper man å tenke. ;-)

    Dette er en kommentar

  4. bza
    21. desember 2006 klokken 11:43

    Hvis du har flere bilder ville jeg gått for en uordnet eller ordnet liste (avhengig) av sekvensen i bildene) i stedet for div-elementet. Det er en stor svakhet med denne teknikken, og det er at her er bildene innhold, ikke presentasjon. Dermed blir det feil at bildene skal forsvinne når man deaktiverer CSS. Trikset er derfor å bruke et img-element med originalbildet, samt et transparent a-element over img-elementet. Dermed når man legger muspekeren over bildet “overskrives” img-elementet med a-elementets bakgrunnsbilde. Da vil du sikre at originalbildet vises selv med CSS deaktivert.

    Dette er en kommentar

  5. Espen Willersrud
    22. desember 2006 klokken 9:35

    Jeg syns da dette uansett var en god løsning i forhold til mange andre :)

    Dette er en kommentar

  6. Espen Andersson
    30. desember 2006 klokken 3:02

    Martin: Ang. løsning 2, gjelder flikking-problemet også i Internet Explorer 7?

    Dette er en kommentar

Ett trackback / pingback til «Standardbasert hover-funksjonalitet for bilder»

Legg igjen en kommentar

Før du poster en kommentar må du være kjent med retningslinjene for kommentarposting, samt personvernpolitikken for bekkelund.net.

Felter merket med * må fylles ut. Din e-postadresse vil ikke være synlig.

Formatering med XHTML: Du kan bruke disse elementene til formatering: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Tekstbaserte uttrykksikoner konverteres automatisk til bilder. Hjelp til formatering.

Martin Bekkelund er fornøyd bruker av WordPress med hjemmelaget tema.
Du kan abonnere på både artikler som Atom, RSS 2.0 eller RSS 0.92, samt kommentarer som RSS 2.0.
Denne artikkelen ble til ved hjelp av 13 kopper espresso konsumert på 0.398 minutter.

Copyright 1995 - 2008 Martin Bekkelund
xhtml
css
rss
cc
508
aaa
v6.08