Billedet ændrer sig, når musen kommer ind over

Siden er opdateret 27. 11. 2005

Der kan være forskellige grunde til, at man ønsker, et billede skal skifte udseende, når musen kommer ind over - og måske igen, hvis der klikkes på billedet.

I denne *.HTM fil indlæses billederne til billedskiftet allerede i filens HEAD-tag. Derved ligger de klar, når der bliver brug for dem.

Prøv at føre musen ind over billedet og se, hvad der sker med det. Prøv derefter at klikke på billedet og se, hvad der sker med det.


Disse billedlink fører ingen steder hen ved klik. Det giver dig mulighed for at se, hvad der sker, når du klikker på knapperne.

Her kan du se, hvordan det laves. I sidens <head> anbringes dette script:

<script type="text/javascript">
<!--
pict1=new Image(); pict1.src='slukket.gif';
pict2=new Image(); pict2.src='aktiveret.gif';
pict3=new Image(); pict3.src='valgt.gif'
pict4=new Image(); pict4.src='slukket2.gif';
pict5=new Image(); pict5.src='aktiveret2.gif';
pict6=new Image(); pict6.src='valgt2.gif'
//-->
</script>

Derefter laver du kaldet til billederne og det dertil hørende link sådan, der, hvor du vil have billedet:

<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="slukket.gif" width="81" height="110"></a><br>
<a href="en_side_på_nettet.htm"
onMouseover = "document.images[1].src=pict5.src"
onClick = "document.images[1].src=pict6.src"
onMouseout = "document.images[1].src=pict4.src">
<img src="slukket2.gif" width="81" height="110"></a>

Skal du have flere af samme slags funktion på den samme side, må du i det første script lave et kald til de dertil nødvendige billeder også. Desuden må du til hvert sæt billeder lave et selvstændigt script på det dertil udpegede sted.

Du skal være opmærksom på at hvert nyt sæt billeder skal have et nyt nummer i den firkantede parentes. Du skal i nummereringen huske at medtage eventuelle billeder på siden, som IKKE skal have funktionen påført! Første billede hedder ALTID images[0], uanset om funktionen skal bruges på billedet eller ej. Andet billede SKAL så hedde images[1] o.s.v.

- eller: Hvis du skal have funktionen på andet og femte billede på siden, SKAL det første aktive billede hedde images[1] (0,1,...) og det andet aktive billede SKAL hedde images[4] (0,1,2,3,4,...)


Det kan også lade sig gøre at lave funktionen sådan, at billederne først hentes, når musen kommer ind over, henholdsvis når der klikkes på billedet. Det gør, at siden indlæses en smule hurtigere, men til gengæld sker billedskiftet tilsvarende langsommere, da billederne nu ikke længere ligger klar i browserens cache.

Hvis du vil lave det på denne måde, skal du lave kaldet til billederne sådan:

<a href="en_side_på_nettet.htm"
onMouseover="document.images[0].src='aktiveret.gif'"
onClick="document.images[0].src='valgt.gif'"
onMouseout="document.images[0].src='slukket.gif'">
<img src="slukket.gif" width="81" height="110" border="0"></A>

... og det script i sidens <head>, der kalder billederne, skal du ikke have med. Men det gælder også her, at hvis du vil lave flere af den slags på samme side, skal du huske at ændre numrene i den firkantede parentes for hvert sæt billeder.

^ Tilbage til sidens top

Valid HTML og CSS / Copyright © Erik Ginnerskov august 2000
Hjemmesideskolen
Du er her: Forsiden - scripts - Billedet ændrer sig, når musen kommer ind over
Brugere lige nu: 1
Home Mail