Placez la code entre les tags HEAD au début du document).
<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>
Place la zone de liste quelque part entre les tags BODY:
<FORM NAME ="fargform">5
<SELECT NAME = "farg"6
SIZE = "8"
onChange = "iljval()">10
<OPTION>picture 1
<OPTION>picture 2
<OPTION>picture 3
<OPTION>picture 4
<OPTION>picture 5
<OPTION>picture 6
<OPTION>picture 7
</SELECT>
</FORM>
Puis il faut une image (img):
<IMG NAME = "iljswitch"8
SRC= "bildfil"11
WIDTH = "pixel"
HEIGHT = "pixel">
If you copy the code - donīt forget to remove the footnotes!
1 this number has to be changed according to the number of
pictures you want to show (in the example the number is 7 since the number
of pictures is seven).
3 the files you want to use,
in the example the picture files are called iljbild1.gif, iljbild2.gif etc,
thus i will represent the number between
iljbild and .gif
4 valdbild will here be set to represent
the ninth character
of the word you have clicked on in the SELECT list, thus in this example
valdbild = the last character of the words, i e the number,
which is the only thing that tells the picture names in the list (and picture files) apart
5 name the FORM
6 name the SELECT list
7 8 means: the ninth character
(the first character = 0) of the word you have chosen in the
SELECT list. So, if you have chosen to look at picture 3, then
valdbild = 3
8 name the IMG
Insted of using the NAME attribute you can replace the line
document.iljswitch.src
by
document.images[i].src
where i should be replaced by 0 if the IMG tag (where the switching is to take place) is the very first IMG
tag on the page, by 1 if the IMG tag is the second IMG tag etc.
Another way of naming the image is using ID (<img id='myname' src='pict.gif'>).
The switching of images could then be done by code looking like this:
document.getElementById('myname').src='other.gif'
9 this will suppress any JavaScript error messages
10 this is where the function is called
11 the name of the picture file you want
to show before the user has chosen a picture in the selection list
Here is the code without footnotes.
- replace iljbild
by the name of the picture files you are goind to use
- if you want to use the code as it is the names of the
picture files have got to be of the same type as in the
example, ie the only thing telling the files apart should be
a number, e g pict0.gif, pict2.gif
etc.
- if you are using
jpg images you will have to replace gif by
jpg.
- set the WIDTH and the HEIGHT of the images
- if you change the (length of the) words in the selection list you
will also have to change the number after charAt (here it is 8)
<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">
OTHER JAVASCRiPT EXAMPLES
How to use javascript to choose what image to show by selecting it in an option list
How to use javascript to switch images
How to use javascript to switch images onmouseover
JavaScript getDay() and document.write
JavaScript date
JavaScript timer
How to use javascript to switch images onmouseover
JavaScript timer
JavaScript onmouseover
JavaScript lastModified
JavaScript/ text in text area
JavaScript/ text in text area
how to open new windows in JavaScript
JavaScript clock
JavaScript confirm
JavaScript alert
JavaScript prompt
JavaScript onmouseover
JavaScript onmouseover2
JavaScript animation
|