En meget enkel måte å lage hovereffekter på. Denne metoden trenger mindre kode og bare ett bilde!
Steg 1
Lag et bilde som er dobbelt så høyt som grafikken du tenker å bruke. Slå på rulers i photoshop (ctrl + R eller cmd + R) og dra ned en hjelpelinje som deler bildet i to.
Steg 2
Sett inn grafikken du skal bruke, for eksempel en logo. Her er det viktig at elementene blir plassert på nøyaktig samme plass i forhold til hverandre. Ellers kommer ting til å flytte seg når du fører pekeren over.
Lagre bildet for web.
Steg 3
Sett inn en link i XHTML-filen og gi den en klasse (class). Navnet på klassen spiller ingen rolle, men gjerne besøk Navneguiden om du står fast!
<a href="http://snopp.no/" title="Skriv en tittel!" class="logo"></a>
Steg 4
Sett opp CSSen med samme klasse som du gav linken. Her har vi valgt å kalle klassen for logo. Du må også angi en høyde. Her blir høyden halvparten av bildets høyde, da vi bare skal vise den øverste delen.
For å vise den nedre delen når vi drar pekeren over endrer du background-position fra left top til left bottom.
a.logo {
background: url(images/logo.png) left top;
width: 100px;
height: 70px;
display: block;
}
a.logo:hover {
background-position: left bottom;
}
Lykke til!
DUdeBluew
29.05.09
Snopp means penis in Swedish.
Jeppe
31.05.09
Haha, I thought it was some kind of a bad joke.
Cock Media!
Gjermund
01.06.09
Dette er smooth ja, men er vel strengt tatt lettere Ã¥ bruke “left bottom” og “left top”? Da slipper du Ã¥ forholde deg til størrelsen pÃ¥ bildene.
Hvis du i tillegg skulle finne pÃ¥ Ã¥ endre logobildet hadde det vært enda litt enklere Ã¥ bruke “background-position: left bottom” pÃ¥ :hover ettersom du da bare trenger Ã¥ endre logo.png pÃ¥ ett sted. Flisespikkeri muligens, men likevel hakket enklere :)
Gisle
01.06.09
Takk for tipset, Gjermund! Koden er oppdatert :-)
Wikipedia.se
02.06.09
Hei gutter!
Ordet “snopp” har flere betydninger! Klikk pÃ¥ Wikipedia.se!
Bjørn Endre
22.06.09
Mm, dette er en god teknikk som er mye brukt. Hovedgrunnen til at jeg bruker denne metoden er at man slipper den “glippen” som oppstÃ¥r nÃ¥r et annet bilde er definert ved hover, og ikke blir lastet inn før musepekeren stÃ¥r over elementet første gang. Hvis dere skjønner :P et lite halvsekund hvor ingen av bildene vises..