JavaScript: A Function to Display Images

 

Precaching Images

We saw in a previous lesson how to precache images so that they are instantly available to the viewer of a page. If the name of the image is 'vcr1.gif,' for example, these 2 lines of script will cause the image to be precached:

     image1 = new Image

     image1.src = "vcr1.gif"

 

Form and Function

We also saw in a previous lesson how to send information from a form element to a function using the keyword 'this.' For example, you could send the contents of a <SELECT> drop-down menu to a function named 'loadCached()' in this way:

<select name=VCRs onChange=loadCached(this)>

When the viewer makes a choice from the <SELECT> drop-down menu, the onChange event handler calls 'loadCached(this)'. The function 'loadCached()' looks like this:

function loadCached(list)
{ var img = list.options[list.selectedIndex].value
   document.vcr.src = img + ".gif"
}

In the first line of the function, the contents of the <SELECT> drop-down menu are stored in the variable 'list.'

In the second line of the function, 'list.selectedIndex' is the number of the option in the <SELECT> menu that the viewer chooses. For example, if she chooses the first item in the <SELECT> menu, 'list.selectedIndex' is 0. If chooses the second item, 'list.selectedIndex' is 1, and so on.

Then 'list.options[list.selectedIndex].value' gives what is stored in the 'value=' section of the chosen <OPTION> tag. If, for example, the viewer chooses the first item in <SELECT> and the first <OPTION> tag is <OPTION value='vcr2'>, then 'list.options[selectedIndex].value' is 'vcr2'.

To understand the third line of the function, bear in mind that an <IMG> object with the name 'vcr' is defined in the <BODY> section. So the third line causes the appropriate GIF image to be displayed by assigning it to the <IMG> object 'vcr.' If the viewer chooses the first item in the <SELECT> menu, for example, the variable 'img' holds 'vcr2'. So the GIF 'vcr2.gif' is displayed in the <IMG> object 'vcr'.

 

Example

Here is the full script that we have discussed above:

<head>
<script language=JavaScript>
<!--

//precache the 4 images of VCRs:
image1 = new Image
image2 = new Image
image3 = new Image
image4 = new Image
image1.src="vcr2.gif"
image2.src="vcr3.gif"
image3.src="vcr4.gif"
image4.src="vcr5.gif"

//function that displays the VCR that the viewer selected
//in the <SELECT> drop-down menu in <BODY>:
function loadCached(list)
{

var img = list.options[list.selectedIndex].value

document.vcr.src = img + ".gif"
}

//-->
</script>
</HEAD>

<BODY>
<h6>Choose a VCR to view:</h6>
<p>
<img src="vcr2.gif" name=vcr width=100>

<form>
<select name=VCRs onChange=loadCached(this)>
<option value="vcr2">Panasonic PV-4520 ($100)
<option value="vcr3">Samsung VR-8060 ($90)
<option value="vcr4">JVC HR-53800 ($200)
<option value="vcr5">JVC SR-VS1OU ($1600)
</select>
</form>

to see this how this script behaves in a new window.

 

Other Resources

Try these links on forms and functions:


Page Link
Calling Functions with Forms www.htmlgoodies.com/primers/jsp/article.php/3478291
Form Fields and the Value Property www.htmlgoodies.com/primers/jsp/article.php/3478301
Forms and JavaScript www.webdevelopersjournal.com/articles/jscript_forms3.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on your own web page or eEverything.com. Precache at least 4 images that you download from the Web. Instead of a <SELECT> drop-down menu, set up 4 radio buttons. Each radio button is associated with a different product. Then add a button. When the button is clicked, run the function 'checkButton()':

<input type=button onClick="checkButton(this.form)" value="Select VCR">

'checkButton()' should call the function 'getSelectedButton()'. The function 'getSelectedButton()' figures out which radio button (0, 1, 2 or 3) was selected. Here is 'getSelectedButton()':

function getSelectedButton(buttonGroup)
{

for(var i = 0; i < buttonGroup.length; i++)

{

if(buttonGroup[i].checked)

return i

}

return -1
}

Once 'getSelectedButton()' is called, 'checkButton()' knows which button was checked. It can then use that number, just as we did in the example above, to display the correct image.

If you work on eEverything.com, find a commercial site (like jandr.com) and download 4 similar images, like 4 sofas or 4 toaster ovens.