Kvikskift rollover

Denne artikel fortæller, hvordan du sørger for, at alle billeder er downloadet til brugerens computer, før websiden vises.

Dette er absolut nødvendigt, hvis rollover-effekten skal virke overbevisende.

Den simple rollover, der er beskrevet på den første side om dette, har en afgørende ulempe.

Det billede, der skal indsættes, når musen føres ind over det aktive areal, først downloades fra serveren. Der kan derfor opstå en mærkbar forsinkelse for brugeren.

Preload

Der findes imidlertid en metode til at indlæse billederne før der er brug for dem, nemlig ved at oprette en reference til dem i browserens head-del:

<script type="text/javascript">
  knap1on=new Image()
  knap1off=new Image()
  knap1on.src='[sti]knap1on.png'
  knap1off.src='[sti]knap1off.png'
</script>

Dette script indsættes i head-delen af websiden. Det opretter knap1on og knap1off som to billedobjekter i websidens image array. Objekterne fyldes med hhv knap1on.png og knap1off.png. Så kan vi siden referere til disse objekter, og være sikre på, at billedfilerne fysisk befinder sig i browserens ache, og derfor ikke skal hentes fra nettet med den deraf følgende tidsforsinkelse.

link til '101'

Herover er et eksempel. Det er ved første øjekast – bortset fra selve billedet – ikke til at skelne fra eksemplet Simpel rollover.

<p class="center">
<a href="http://www.webdesign101.dk"
onmouseover="document.images.knap1.src = knap1on.src"
onmouseout="document.images.knap1.src = knap1off.src">
<img src="res/knap1off.png" id="knap1" width="41" height="33" 
alt="link til '101'" /></a>
</p>

Situationen her er imidlertid den, at såvel knap1off.png som knap1on.png begge er downloadet, når markøren føres hen over det aktive område. Disse billeder refereres via den kode, der er markeret med rød skrift. Derved undgås forsinkelser visningen af knap1on.

Hvad gør knappen?

Grafiske knapper uden tekst er ikke særlig informative. Den her viste knap siger jo intet i sig selv. Den kan derfor kun bruges i et system, hvor der står noget om knappens funktion ovenover, nedenunder eller ved siden af knappen.

alt-teksten i <img>-markøren vil ganske vist blive vist som en lille tekstboble, når musen føres hen over billedet, men du kan ikke forlade dig på det som en brugbar information.

Der er imidlertid den mulighed at knytte en tekst til knappen og lade teksten være den link, der udløser rollover-funktionen:

Link til Webdesign 101

Webdesign 101

I forhold til eksemplet ovenfor er billedet – knappen i 'off'-tilstand – her flyttet uden for link-markøren og i stedet er indsat en tekst, der fortæller om, hvad linket vedrører.

<p align=center>
<img src="/rollover/res/off.gif" width=48 height=48 
id="button"  alt="Link til Webdesign 101">
</p>
<p align=center>
<a title="Link til Webdesign 101" 
href="http://www.webdesign101.dk"
onmouseover="document.images.button.src = buttonon.src"
onmouseout="document.images.button.src = buttonoff.src">
Webdesign 101</a></p>

Det er her på siden nødvendigt at oprette endnu to billedobjekter, idet flere rollovers på samme side nødvendigvis skal have forskellige objektnavne. Også selvom de egentlige grafikobjekter er de samme.

Læg mærke til den erfaring, vi her har gjort – nemlig at vi ved en mouseover på ét element kan manipulere med et andet element. Den erfaring får vi brug for, når vi skal lave mere elegante rollovers, som vi skal se i de følgende eksempler, f.eks. eksemplet med Rullende grafik

1 2 3 4 5 6 7 8 9 10

Denne side er senest opdateret: 2. December, 2006