Jæja, þar sem hover effects virðast vera svo vinsæl, og fólk að nota hina ótrúlegustu og misjöfnu javascript kóða. Þá langaði mig að kenna ykkur einfaldari aðferð með hjálp CSS.

Þessi aðferð inniheldur aðeins eina mynd, svo vafrinn eyðir ekki tíma í að hala niður hover effectinum, sem oft er gert þegar maður loksins fer með músina yfir eftirfarandi takka. Þessi aðferð virkar einnig í flestum vöfrum (allavega IE, Firefox og Opera) og er því einnig mjög góður léttir.

Jæja, við byrjum á því að nota mynd sem er 75x50, þar sem upprunalega myndin sem kemur fram er 75x25, en hover effectinn hinn helmingur myndarinnar. (sjá meðfylgjandi mynd). Eina downside, sem skiptir ekkert rosalega miklu máli, er að þetta tag verður að vera <a>.

Það fyrsta sem ég ætla að gera er takkinn sjálfur í html. Sem dæmi lítum á:


Frekar einfaldur tengill (þó ég croppa þetta ekki venjulega svona niður).

Nú er komið að galdrinum, CSS.
Fyrst er að gera allan þann kóða nauðsynlegan til að fá fram rétt útlit. Síðar hoverið.


Ef allt fer vel, þá ættuð þið að vera komin með einfaldan hover effect. Þið snillingar megið glaðlega koma með leiðbeiningar um hvernig það er hægt að gera þetta meira valid, eða support til að sýna eitthvað alternate fyrir eldri browsera. En þangað til, Merry christmas to all, and to all a good night.

Njótið ;)

Bestu kveðjur,
Rusty

Sérstakar þakkir, sá sem kenndi mér þetta upprunalega, þó aðeins öðruvísi,
SkiZy / skizy@half-life.is