Klicka på pilen i listan och välj en bild!
(bilderna kommer från Paint Shop Pro 5)
Placera javascript-koden i HEAD-delen i vanlig ordning (se
MINIMANUAL 1 lite grunder).
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
if(document.images)
{
bild = new Array()
for(i=0;i<7;i++)//1
{
bild[i] = new Image()//2
bild[i].src = "iljbild" + i + ".gif"//3
}
}
function iljval()
{
if(document.images)
{
valdbild4=document.fargform5.farg6.options[document.
fargform5.farg6.selectedIndex].text.charAt(5)7
document.iljswitch8.src = "iljbild"+valdbild4+".gif"
}
}
window.onerror = null;9
//-->
</SCRIPT>
Placera resten mellan BODY-taggarna:
<FORM NAME ="fargform">5
<SELECT NAME = "farg"6
SIZE = "8"
onChange = "iljval()">10
<OPTION>bild 1
<OPTION>bild 2
<OPTION>bild 3
<OPTION>bild 4
<OPTION>bild 5
<OPTION>bild 6
<OPTION>bild 7
</SELECT>
</FORM>
Placera en bild någonstans:
<IMG NAME = "iljswitch"8
SRC= "bildfil"11
WIDTH = "pixel"
HEIGHT = "pixel">
Glöm inte att ta bort alla fotnoter om du kopierar koden!
1 siffran måste förstås anpassas efter
antalet bilder (i exemplet 7 eftersom antalet bilder är sju); den
här första biten av koden förladdar de bilder som kommer
att användas.
2 skapar nya bilder
3 här talar man om vilka bildfiler som skall
användas, i exemplet heter filerna iljbild0.gif,
iljbild1.gif etc,
i ger alltså
siffran medan iljbild och .gif
4 valdbild sätts här till sjätte tecknet i det
bildnamn man klickat på och som
är markerat med avvikande färg i SELECT-listan,
i exemplet är det alltså
slutsiffran (det enda som skiljer bildernas namn åt)
5 ge FORMen ett
namn vilket som helst
6 ge SELECT-listan
ett namn vilket som helst
7 5 betyder: tecken nummer sex (första
tecknet = 0) i ordningen i det bildnamn
som är markerat i SELECT-listan. Om man till exempel
valt att titta på bild 3
så blir valdbild = 3 och ger alltså
på nästa rad siffran mellan iljbild och .gif i bildfilens
namn
8 ge bilden (IMG)
ett namn vilket som helst
I stället för att använda NAME kan
man byta ut raden
document.iljswitch.src
mot
document.images[i].src
där i byts mot en 0 om bildplatsens IMG-tagg är den
första IMG-taggen på sidan, mot en 1 om bildplatsens IMG-tagg är den
adnra IMG-taggen på sidan etc.
9 tar hand om eventuella JavaScript-felmeddlanden
10 här anropas funktionen
11 den bild som skall visas från början
Här är hela koden utan fotnoter.
- ersätt iljbild
med namnet på de bildfiler du tänker använda.
- för att koden ska
fungera måste bildfilernas namn vara av samma typ som i exemplet, dvs
det enda som skiljer namnen åt är en siffra, tex bild0.gif, bild2.gif
etc.
- använder du
jpg-bilder måste du också byta ut gif mot
jpg. fyll i bildernas bredd och höjd.
- siffran 5 efter charAt måste ändras om du ändrar orden i
rullgardinsmenyn
<SCRIPT LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
if(document.images)
{
bild = new Array()
for(i=0;i<7;i++)
{
bild[i] = new Image()
bild[i].src = "iljbild" + i + ".gif"
}
}
function iljval()
{
if(document.images)
{
valdbild=document.fargform.farg.options[document.
fargform.farg.selectedIndex].text.charAt(5)
document.iljswitch.src = "iljbild"+valdbild+".gif"
}
}
window.onerror = null;
//-->
</SCRIPT>
<FORM NAME ="fargform">
<SELECT NAME = "farg"
SIZE = "8"
onChange = "iljval()">
<OPTION>bild 1
<OPTION>bild 2
<OPTION>bild 3
<OPTION SELECTED>bild 4
<OPTION>bild 5
<OPTION>bild 6
<OPTION>bild 7
</SELECT>
</FORM>
<IMG NAME = "iljswitch"
SRC= "bildfil"
WIDTH = "60"
HEIGHT = "60">
Om FORM och SELECT se
HTML:forms/e-postfomulär.
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
[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
|