EchoEcho.Com KOMPLETT KURS |
HEM KURSER JAVASCRIPT AVANCERADE SCRIPTS |
EchoEcho.Com REDSKAP & RESURSER |
|||||||||||||||
| |||||||||||||||||
|
|
|
Efter det att du lagt in bildknappen på hemsidan måste du lägga in några kommentarer till bild-taggen. Efter du har gjort det kan du lägga till javascriptet som ändrar bilden när du för över muspekaren på den. Första halvan av den här sidan beskriver ren HTML-kodning för att lägga in en bild så att javascriptet kan referera till den. Andra halvan beskriver hur javascriptet ändrar bilden när en mouseover körs. HTML-KODEN En vanlig bild som fungerar som en länk-knapp ser ut ungefär så här i HTML:
För att få javascriptet att ändra bilden, måste vi ge den ett namn som kan användas av javascriptet så att scriptet hittar den. I vårt fall bör alltså HTML:n se ut så här:
Nu har knappen ett namn som kan användas som en referens när vi vill att javascriptet skall ändra den till en annan bild. Vi måste tala om för webläsaren att då muspekaren förs över bilden, skall läsaren starta en funktion som byter ut bilden. Det här görs med hjälp av onmouseOver egenskapen. Förutom det ovanstånde, måste vi även tala om för webläsaren att då användaren för muspekaren ifrån bilden, skall ett annat javascript köras så att den första bilden på knappen skall synas igen. Det här görs med onmouseOut egenskapen. Den slutliga HTML-koden ser ut så här:
Det här är allt du behöver göra i HTML-delen av sidan. Resten görs i javascript. Notera: Musegenskaperna läggs in i <a href> taggen - INTE i bild-taggen. Det är för att webläsare inte ser musegenskaper på bilder. Även ifall det låter dumt så är det trots det sant. Just därför kan vi bara skapa animerade bilder genom att omvandla dom till länkar. Då webläsaren ser mouseover-egenskaper för länkar, kommer den att registrera en musegenskap på en bild om bilden är en länk. JAVASCRIPTKODEN Följande javascript bör läggas in i head-delen av din hemsida.
Om du vill ha flera knappar på din hemsida, så behöver du bara kopiera varje rad som refererar till button1 och ändra det till button2 eller button3 eller vad för namn eller nummer du än har på dina knappar.
|
|
|
EchoEcho.Com KOMPLETT KURS |
|
EchoEcho.Com REDSKAP & RESURSER |
|||||||||||||||||
(c) Copyright 1998-2000 NetKontoret - All Rights Reserved | |||||||||||||||||||