OM FLYGPLAN!
 OM SKALBAGGAR! OM BILAR! OM FISKAR! |
   
|
|
I det här exemplet visas alltså olika bilder beroende på vilken länk muspekaren förs över; alla bilder visas på ett och samma ställe. 1 Placera en bild på sidan: Så här skulle bildtaggen kunna se ut:
2 På den här bildplatsen som alltså fått namnet bildplatsen ska olika bilder visas när muspekaren förs över olika textlänkar. Så här skulle en bild kunna se ut:   För att åstadkomma det måste man förladda bilderna, dvs se till så att alla bilder laddas samtidigt med sidan. Så här kan man göra det: bild=new Array() bild[0]= new Image() bild[0].src="basbild.gif" bild[1]= new Image() bild[1].src="minbild1.gif" bild[2]= new Image() bild[2].src="minbild2.gif" Den här kodbiten förladdar tre bilder, nämligen bildfilerna basbild.gif (som ska visas när muspekaren inte befinner sig över någon länk) samt minbild1.gif och minbild2.gif (som alltså är två av de nya bilder som ska visas) . De här bilderna laddas samtidigt som sidan i övrigt men de syns inte på sidan förrän man använder kod som plockar fram dem. 3 Placera länkarna på sidan. T ex så här: <A HREF="URL här" ONMOUSEOVER="iljswtch(1)" ONMOUSEOUT="iljswtch(0)">TEXT 1</A> <A HREF="URL här" ONMOUSEOVER="iljswtch(2)" ONMOUSEOUT="iljswtch(0)">TEXT 2</A> När muspekaren förs över en av länkarna ovan (och en mouseover alltså äger rum) eller när muspekaren lämnar en av länkarna ovan (och en mouseout äger rum) anropas en funktion som här fått namnet iljswtch(). När muspekaren förs in över den första länken anropas funktionen iljswtch() med 1 inom parentesen (som argument eller parameter), så här: När muspekaren lämnar den första länken anropas funktionen iljswtch() med 0 inom parentesen, så här: Siffran inom parentes bestämmer vilken bild som ska visas. Siffran 0 talar om för funktionen att av de förladdade bilderna är det bild[0] som ska visas. Siffran 1 talar om för funktionen att det är bild[1] som ska visas. Så här ser funktionen ut (ändra ingenting i den!): function iljswtch(bildnummer) { document.bildplatsen.src=bild[bildnummer].src } Siffran inom parentes kommer in i funktionen som bildnummer Om siffran inom parentes är 0 kommer funktionens enda rad (dvs den rad som visar en ny bild på bildplatsen bildplatsen) alltså att bli och den bild som visas är alltså den som förladdats som bild[0].src. Använd inte den röda raden här ovan i koden. Det enda den skulle göra är att visa en och samma bild (bild[0].src) på bildplatsen. Alla webbläsare klarar inte av att byta bilder; man bör alltså ta reda på vad som gäller i den webbläsare sidan visas i och placera koden i en villkorssats (if-sats). Så här skulle då den färdiga JavaScript-koden kunna se ut: <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- if(document.images) { bild=new Array() bild[0]= new Image() bild[0].src="basbild.gif" bild[1]= new Image() bild[1].src="minbild1.gif" bild[2]= new Image() bild[2].src="minbild2.gif" //ev fler bilder } function iljswtch(bildnummer) { if(document.images) { document.bildplatsen.src=bild[bildnummer].src } } //--> </SCRIPT> JavaScript-koden placeras bäst mellan HEAD-taggarna; bilden (IMG-taggen) och länkarna placeras mellan BODY-taggarna (se MINIMANUAL 1 lite grunder). De enda ändringar som ska göras i Javascript-koden är alltså att ta bort/ eller lägga till bilder. Varje ny bild ska ha två rader bild[3]=new Image() bild[3].src="bildfilen". Övriga ändringar görs efter ONMOUSEOVER och ONMOUSEOUT; det är siffrorna inom parenteserna som bestämmer vilken bild som visas. Sidan http://www.flowsim.se/picts/iljjava/iljimagl.html gjordes av  ilj@flowsim.se Senast ändrad 9 februari 1999. Den här sidan hör hemma i ett ramsystem hos: www.flowsim.se JAVASCRiPT |