©ilj@flowsim.se
JavaScript code samples 16
JavaScript onChange
JavaScript select, charAt
>>> en Suédois
>>> en Anglais

 
 
Choississez une image!
(les images - Paint Shop Pro 5)

 
bilder
 

 
 




 
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)
      {
      valdbild
4=document.fargform5.farg6.options[document.
fargform
5.farg6.selectedIndex].text.charAt(5)7
      document.iljswitch
8.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
 

Page by
ilj
ilj/.../flowsim.se
Last modified: August 15, 1998
This page should be part of a frames system
at:
http://www.flowsim.se
JAVASCRiPT