EchoEcho.Com
KOMPLETT KURS

HEM KURSER JAVASCRIPT AVANCERADE SCRIPTS     
EchoEcho.Com
REDSKAP & RESURSER
 HEM 
 
 KURSER 
 
 RESURSER 
 
 REDSKAP 
 
 DOKUMENTATIONER 
 
 ÖVERSIKT 
  
SÖK PÅ SIDAN

Tala om för en vän
REKOMENDERA SIDAN    

ANIMERADE KNAPPAR

INTRODUKTION


TEKNIK


KOD


EXEMPEL

Animerade Knappar :
KOD

Innan du kan lägga in en animerad knapp på din sida måste du lägga in själva bilden på knappen.

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:

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


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:

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


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:

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


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.

<Script>


<!--
// Följande rader döljer scriptet från
// äldre webläsare som inte kan köra det


// Förmoda att första bilden the up button kallas "button1a.gif"
// Och att den andra bilden the down button kallas "button1b.gif"
// Vi kan nu läsa in de här två bilderna som variabler
// som då heter button1up och button1down.


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

// Nu har de två bilderna definierats.

// I nästa steg behövs de två funktionerna.
// Första funktionen kallas MouseOverRoutine,
// Och gör att button1up ändras till button1down.


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

// Nu ändrar sig vår knapp från button1up till button1down
// När en musegenskap sker
// För att få ett komplett script så är allt vi behöver göra
// att skapa en omvänd funktion som gör det exakt motsatta
// när en mouseout-egenskap sker.


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

// Det är allt.
// Slutligen skall vi avsluta script-delen med hjälp av två rader:


// Nästa rad gör att gamla webläsare
// börjar tolka koden igen.

//-->

</script>



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.



<< FÖREGÅENDE
LÄS MER >>

JAVASCRIPT MENY

JAVASCRIPT GRUNDER


ANIMERADE KNAPPAR


WEBLÄSARKONTROLL


COOKIES


POPUP FÖNSTER


DROP-DOWN MENYER


FORM VALIDERING


FRAMESET SCRIPT


MULTIBLA LÄNKAR




Click Here!





EchoEcho.Com
KOMPLETT KURS
 HEM 
 
 KURSER 
 
 RESURSER 
 
 REDSKAP 
 
 DOKUMENTATIONER 
 
 ÖVERSIKT 
EchoEcho.Com
REDSKAP & RESURSER

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