©ilj@flowsim.se
JavaScript code samples 37
JavaScript onClick / images / textarea
switching images onClick
>>> this example in Swedish
 
 

 

 

 

code & explanations below





 
Put a TEXTAREA on a FORM and name them, like this:

<FORM NAME = "iljtextareaform">1
<TEXTAREA NAME = "iljtextarean"2
ROWS = "8"
COLS = "30"
WRAP = "physical">
</TEXTAREA>
</FORM>

Code for the first two clickable images could look like this:
 
<A HREF = "#"
ONCLICK="iljtextval(0,0);return false">
<IMG SRC= "picture file"
WIDTH = "width of image"
HEIGHT = "width of image"
BORDER="0"></A>
 
<A HREF = "#"
ONCLICK="iljtextval(1,1);return false">
<IMG SRC= "picture file"
WIDTH = "width of image"
HEIGHT = "width of image"
BORDER="0"></A>
 
 Clicking one of the images thus calls the function iljtextval(). This function shows the texts and switches the images. The numbers within parentheses keep track of WHICH TEXT to display and WHERE to switch images. The numbers will enter the function as textnummer and bildnummer respectively.
First of all the image files are preloaded if switching images is OK in the browser being used. This is what the code looks like:
 
<SCRIPT LANGUAGE="JavaScript">
<!--
if(document.images)//3
{
iljbild = new Array()
iljbild[0] = new Image()
iljbild[1] = new Image()
iljbild[0].src = "../darkred.gif"
iljbild[1].src = "../red.gif"
}
 
function iljtextval(textnummer,bildnummer)
{
text = new Array()
text[0] = "text 1 text"
text[1] = "text 2 text"
// etc
document.iljtextareaform1.iljtextarean2.value = text[textnummer]
if(document.images)
{
for(i=0;i<text.length;i++)//4
{
document.images[i].src=iljbild[0].src
}
document.images[bildnummer].src=iljbild[1].src//5
}
}
//-->
</SCRIPT>

1 the name of the FORM
 
2 the name of the TEXTAREA
 
4 on this page there are no pictures before those that are part of the example; that means that the first clickable arrow is document.images[0]. This loop thus starts from 0 and makes sure that the initial picture (in this example the arrow) is displayed at all places and then ...
 
5 the image you´ve clicked is replaced by a new one (in this example a red circle)
 
Don´t forget to remove footnotes if you copy the code!
 
 

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
JavaScript animation 2
 


Page by
ilj
ilj@flowsim.se
Last modified: May 29, 1998
This page should be part of a frames system, if it is not, enable your javascript and click:
http://www.flowsim.se/
JAVASCRiPT