Simpel grafisk rollover

Rollover er den effekt, du ser på en webside, at noget ændrer sig, når du fører musemarkøren hen over et bestemt område på skærmen.

Dette er den første af en serie artikler, der skridt for skridt udvikler et JavaScript, du kan bruge til alle mulige slags grafiske rollovers.

En sådan rollover-effekt optræder ofte i forbindelse med noget grafik, f.eks. i form af billeder af knapper:

link til '101'

Her er et eksempel. Koden til dette eksempel ses herunder.

<p class="center">
<a href="http://www.webdesign101.dk" 
onmouseover="(document.images.knap.src='on.gif')" 
onmouseout="(document.images.knap.src='off.gif')">
<img src="off.gif" id="knap" height="48" width="48" 
alt="link til '101'" /></a>
</p>

Hvad sker der her?

For at få en forståelse af, hvad det lige er, der sker her, er det vigtig at vide, at img-elementets src-egenskab kan aflæses og ændres ved hjælp af JavaScript.

For at vi kan gøre dette, er det afgørende nødvendigt at vide, hvilket img-element, det konkret drejer sig om. Derfor skal det konkrete billede, for hvilket vi ønsker at ændre værdien af src-egenskaben, have et navn i form af en ID. Dette navn er i ovenstående eksempel knap.

Når dette er tilfældet kan vi tilgå det konkrete billedelements src-egenskab på ovennævnte måde, det vil sige

document.images.ID.src=[url]

– hvor ID er værdien af grafikkens id-attribut, der skal være unikt for siden, og url er den absolutte eller relative sti til til grafikken.

At værdien af id-attributten skal være unikt for siden, betyder at to eller flere elementer på den samme side ikke må have den samme værdi for id. Der må kun være ét element med værdiparret id="knap".

For at få tingene til at virke, skal der naturligvis være to forskellige men lige store (samme bredde og højde) grafikker, svarende til de to tilstande af knappen, som vi ønsker.

Disse to tilstande er kendetegnet ved, at musen enten befinder over den a-markør, der omslutter grafikken, eller også at musen ikke befinder sig over a-markøren.

Til at aflæse disse to tilstande benytter vi onmouseover og onmouseout event handlerne, som de ser i eksemplet herover.

Der er en smartere måde at lave dette på. Den er beskrevet i dokumentet Kvikskift rollover.

1 2 3 4 5 6 7 8 9 10

Denne side er senest opdateret: 3. December, 2006