JavaScript på svenska 41
JavaScript onMouseOver & JavaScript onMouseOut/ animation
PÅ MÅNDAGAR STARTAS EN ANIMATION NÄR MUSPEKAREN FÖRS ÖVER BILDEN. |
|
PLACERA EN BILD PÅ HTML-SIDAN MED HJÄLP AV FÖLJANDE TAGGAR: <A HREF = "URL" onMouseOver = "iljswtch2(1)"1 onMouseOut = "iljswtch2(0)">2 <IMG NAME = "iljswitch" 3 SRC= "bildfil"4 WIDTH = "pixel" HEIGHT = "pixel" BORDER = "0"></A> Placera följande JavaScriptkod i HEAD-delen (se MINIMANUAL 1 lite grunder). Första delen av koden förladdar bilderna: <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- if(document.images) //5 { i=0 j=0 anropad=0 bild = new Array() bild[0]= new Image() bild[1]= new Image() bild[2]=new Image() bild[3]=new Image() //etc bild[0].src= "bildfil 1" bild[1].src= "bildfil 2" bild[2].src= "bildfil 3" bild[3].src= "bildfil 4" //etc } function iljswtch2(nummer) //6 { if(document.images) //7 { var datum=new Date() //8 var dag=datum.getDay()//9 if(dag!=1)//10 { document.iljswitch3.src = bild[nummer].src//11 } else { test()//12 } } } function test() { if(anropad == 0) { anropad = 1 iljanim2() } } function iljanim2() { document.iljswitch.src = bild[i].src iljtimer = setTimeout("iljanim2()",250)//13 i++ if(i==bild.length)//14 { i=0 j=j+1 } if(j==50)//15 { clearTimeout(iljtimer) anropad = 0 j=0 } } //--> </SCRIPT> Om du kopierar koden - glöm inte att ta bort alla fotnoter! 1 här anropas funktionen iljswtch2(); ettan inom parentes kommer in i funktionen som nummer och talar alltså om att bild[1] ska visas 2 här anropas funktionen iljswtch2() nollan inom parentes kommer in i funktionen som nummer och talar alltså om att bild[0] ska visas 3 ge bilden ett namn vilket som helst 4 den bild som visas när sidan laddas, innan någon mouseover ägt rum 5 Den här första delen av koden skapar en array med de bilder man tänker använda och den laddar också ner bilderna. Om man låter sidan ladda klart innan man för muspekaren över bilden byts bilden/ startar animationen alltså direkt. I övrigt sätts här några variabler som ska hålla reda på vilken animationsbild som ska visas (i) och hur många gånger animationen ska köras (j). anropad används för att se till att timern/ animation startas bara en gång. 6 den här funktionen anropas alltså vid varje mouseover och mouseout; vilken bild som ska visas bestäms av den siffra som kommer in från anropet 7 även här bör man ha villkoret att ingenting händer om inte browsern klarar av det, annars får de som använder t ex MIE 3 ett felmeddelande när muspekaren förs över bilden 8 här får man fram datum och tid och ... 9 ur det får man fram en siffra som talar om vilken veckodag det är; 1 betyder måndag, 2 tisdag etc. Tittar man på sidan en tisdag sätts alltså variabeln dag till 2. (Eftersom de är deklarerade med hjälp av var är både datum och dag här lokala variabler; det betyder att de är bortglömda så snart koden i funktionen utförts.) 10 if-satsen kan läsas "om variabeln dag inte är lika med 1", dvs om det inte är måndag så ska nästa rad utföras... 11 här sker den "normala" bildväxlingen alla dagar utom måndagar 12 annars, dvs om variabeln dag är lika med 1, dvs om det är måndag så ... 13 anropas funktionen test() och om animationen inte redan startats så gör den det Resten av koden är i princip densamma som under JavaScript 18 images/ animation. Vad man kan behöva ändra är 14 den här raden gör att funktionen iljanim2 anropar sig själv och att bilderna byts med ett intervall av 250 millisekunder; ett mindre tal får alltså figuren att "röra sig" snabbare 15 den här siffran måste man förstås anpassa till antalet bilder man använder 16 den här siffran reglerar hur länge animationen håller på 
Istället för att använda IMG-taggens NAME-attribut för att identifiera bildplatsen kan man byta ut raderna document.iljswitch.src mot document.images[i].src Om bilden som ska bytas är den första på sidan ska i bytas ut mot 0, om bilden är sidans andra bild ska i bytas ut mot 1 etc. Gör man på det här sättet kan NAME="iljswitch" plockas bort. Fler JavaScript-exempel:  onmouseover image/mouseover variant varannan dag bildväxl/animering välja bild i rullgardinsmeny meddelandefönster datum & tid meddelande onLoad onFocus lastModified image/mouseover onblur klocka history images/ animation ändra bakgrundsfärg timer rörlig text i textarea JavaScript confirm mer om datum öppna nytt fönster 1 öppna nytt fönster 2 JavaScript prompt flytande lager[fler JavaScript-exempel hittar du i menyn i ramen till vänster] 
Sidan gjordes av ilj@flowsim.se Senast ändrad 2 april 2004. Den här sidan hör hemma i ett ramsystem hos www.flowsim.se JavaScript på svenska |