Om Martin
Martin liker
Standardbasert hover-funksjonalitet for bilder
20.12.06 • 6 kommentarer
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! 
6 kommentarer
-
rett og slett flink du ;D
-
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: bottomved hover, så slipper man å tenke.
-
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.
-
Jeg syns da dette uansett var en god løsning i forhold til mange andre
-
Martin: Ang. løsning 2, gjelder flikking-problemet også i Internet Explorer 7?
Har du synspunkter? Legg igjen en kommentar!
RSS og trackback
Med RSS kan du abonnere på nye kommentarer som postes til denne artikkelen.
Du kan legge igjen et trackback fra ditt eget nettsted ved å benytte trackback-adressen til denne artikkelen. Eventuelle tracback ser du under.
Flere artikler
- Holder de ord
- The Greatest Bits 3
- Røde kjemper
- Fremdrift
- Skydebatten
- Supertankere og robåter
- IT-realitetsorientering
- Altinn-skandalen
- Steve Jobs
- Webfonter
Enda flere artikler? Besøk arkivet.
Bekkelund.net er en blogg av Martin Bekkelund, hvor han lufter sine tanker om IT og IT-politikk. Martin arbeider til daglig som seniorrådgiver, foredragsholder og skribent i IT-bransjen, hvor han veileder bedrifter og organisasjoner i strategisk bruk av IT. Les mer...
© 1995-2012 Martin Bekkelund
Opphavsrett • RSS • Kontakt
Espen Andersson
20. desember 2006 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.