EchoEcho.Com
KOMPLETTE WEBKURSER
HJEM KURSER JAVASCRIPT AVANCERET     		 EchoEcho.Com
TOOLS & RESSOURCER
 HJEM 
 
 KURSER 
 
 RESSOURCER 
 
 REDSKABER 
 
 DOKUMENTATION 
   
 OVERSIGT 
  
  SØG PÅ DETTE SITE
FORESLÅ DETTE SITE
FORESLÅ DETTE SITE      

ANIMEREDE KNAPPER

INTRODUKTION

TEKNIKKEN

KODEN

EKSEMPEL

Animerede Knapper :
KODEN
Før du kan indsætte en animeret knap på din side, skal du sætte knappens billede ind først.

Når du har tilføjet et billed af knappen til din side. Skal du tilføje et par komentarer til dit image tag.

Efter det kan du indsætte javascriptet som skifter din knap ud når musen bevæges hen over din knap.

Den første halvdel af denne side forklarer den simple HTML kode der bruges til at indsætte knappen med så javascript kan referere til den.

Den anden halvdel forklarer selve mouseover eventen.



HTML KODEN

Et billed der virker som knap ser nogenlunde sådan her ud i HTML kode:

<a href="mypage.htm">
<Img Src="button1a.gif">
</a>


For at javascript skal kunne skifte billedet ud med et andet er vi nødt at give det et navn, så Javascript kan genkende det.

Så i vores tilfælde skal HTML koden se sådan ud:

<a href="mypage.htm">
<Img Src="button1a.gif" name="button1">
</a>


Nu har knappen et navn som kan bruges til at referere til når knappen skal skiftes ud med en anden knap.

Vi skal fortælle browseren at når en mus bevæger sig hen over knappen, skal browseren udføre en funktion som udskifter knappen med en anden knap.
Dette gøres med onmouseOver eventen.

Vi skal også fortælle browseren at nå vi bevæger musen væk fra knappen så skal et Javascript sørge for at vores første knap bliver synlig igen.
Dette gøres med onmouseOut eventen.

Den færdige HTML kode ser sådan ud:

<a href="mypage.htm" onmouseOver="MouseOverRoutine('button1')" onmouseOut="MouseOutRoutine('button1')">
<Img Src="button1a.gif" name="button1" ></a>


Dette er alt der skal gøres i HTML. Resten gøres af javascript.

NB:
Mouse events skal tilføjes til <a href> tagget - ikke image tagget. Dette er fordi at browsere ikke kigger efter mouseover events på billeder. Derfor kan vi kun lave animerede billeder hvis vi laver dem om til links.



JAVASCRIPT KODEN

Følgende javascript skal tilføjes til headdelen af din side.

<Script>


<!--
// Forrige linie skjuler scriptet for
// gamle browseres, som ikke kan fortolke den

// Lad os antage, at billedet af oppe-knappen bliver kaldt "button1a.gif"
// Og at nede-knappen bliver kaldt "button1b.gif"
// Så kan vi nu læse disse to billeder som variabler
// kaldet button1up og button1down.

button1up = new Image; button1up.src = "button1a.gif";
button1down = new Image; button1down.src = "button1b.gif";

// Nu er de to billeder defineret.

// Næste trin er de to nødvendige funktioner.
// Den første funktion kaldes MouseOverRoutine,
// og gør, at button1up skifter til button1down.

function MouseOverRoutine(ButtonName)
{
if (ButtonName=="button1")
{document.button1.src = button1down.src;}
}

// Nu vil vor knap skifte fra button1up til button1down
// når der foretages en mouseover-event.
// Alt vi behøver at gøre for at færdiggøre scriptet
// er at udføre den omvendte funktion, som vil udføre det stik modsatte
// når der foretages en mouseout-event.

function MouseOutRoutine(ButtonName)
{
if (ButtonName=="button1")
{document.button1.src = button1up.src;}
}

// Det var alt.
// Det sidste trin er at afslutte script-sektionen, hvilket gøres med 2 linier:

// Den næste linie gør, at gammeldags browseres
// begynder at oversætte koden igen.
//-->

</script>



Hvis du vil have mere end én knap på din side, er alt, du behøver at gøre, at fordoble hver linie, der refererer til button1, og ændre dem til button2, button3, afhængig af hvor mange knapper du har.

<< TILBAGE
LÆS MERE >>
JAVASCRIPT MENU

JAVASCRIPT INTRO

ANIMEREDE KNAPPER

BROWSER DETECTION

COOKIES

POPUP VINDUER

DROP DOWN MENU

FORM VALIDERING

FRAMESET SCRIPT

MULTI LINK







EchoEcho.Com
KOMPLETTE WEBKURSER
 HJEM 
 
 KURSER 
 
 RESSOURCER 
 
 REDSKABER 
 
 DOKUMENTATION 
   
 OVERSIGT 
 EchoEcho.Com
TOOLS & RESSOURCER

(c) Copyright 1998-1999 NetKontoret - All Rights Reserved