EchoEcho.Com KOMPLETTE WEBKURSER |
HJEM KURSER JAVASCRIPT AVANCERET |
EchoEcho.Com TOOLS & RESSOURCER |
|||||||||||||||||
| |||||||||||||||||||
|
|
|
|
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:
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:
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:
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.
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.
|
|
|
EchoEcho.Com KOMPLETTE WEBKURSER |
|
EchoEcho.Com TOOLS & RESSOURCER |
|||||||||||||||||||
(c) Copyright 1998-1999 NetKontoret - All Rights Reserved Opdateret: 09/20/2001 12:10:11 | |||||||||||||||||||||