Hvordan skifter man et billede med onmouseover?

Af Erik Ginnerskov

Opdateret: 20-10-2011

Du har to muligheder:

Enten kan du lade browseren hente de nye billeder, når cursoren kommer ind over det billede, der skal skiftes - dette kan kun anbefales, hvis billederne er meget små (under 100 bytes).

Eller du kan lade browseren hente billederne straks, så de ligger i cachen klar til brug, når cursoren kommer.

Hvordan

Hvis du vil lade browseren hente billederne efter behov, skal du lave dit kald til billedet på denne måde:

<img src="billede1.gif" onmouseover="this.src='billede2.gif'" onclick="this.src='billede3.gif'" onmouseout="this.src='billede1.gif'" alt="">

Demo:

Efterfølgende kan du afgøre med dig selv, om der skal knyttes et link til billedet eller ej. Skal der ikke være et link, kan du undvære onclik-definitionen

Skal du bruge billeder, der tager nogle sekunder at hente hjem, kan du ikke benytte denne simple metode. Du er nødt til at loade billederne på forhånd. Det gør du ved at lægge dette script i sidens <head>:


<script type="text/javascript">

pict1=new Image(); pict1.src='inaktiv.gif';

pict2=new Image(); pict2.src='musover.gif'

pict3=new Image(); pict3.src='vedklik.gif'

</script>

Derefter skal du lave kaldet til billedet på denne måde:


<a href="en_side_på_nettet.htm"

onmouseover = "document.images[0].src=pict2.src"

onclick = "document.images[0].src=pict3.src"

onmouseout = "document.images[0].src=pict1.src">

<img src="inaktiv.gif" width="81" height="110" alt=""></a>

Skal du ikke med billedet linke til et andet element på Nettet, skifter du URL'en i første linje ud med en 'havelåge', så der står <a href="#"

Hvordan skifter man et billede med onmouseover?

Hvordan

Artikler om HTML

FAQ-svar om HTML

Kodebasen om HTML