An array is a group. An array is also an object, and as an object, it has properties. There are built in arrays, such as all the images on a page. Have a look at this...
<html>
<head>
<title></title>
<script type="text/javascript">
function ShowSource(position)
{
window.document.form01.input01.value = window.document.images[position].src;
}
function NumberofImages()
{
alert(window.document.images.length);
}
</script>
</head>
<body>
<center>
<a href="" onMouseOver="ShowSource(0) "><img src="food_icons/beer.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(1) "><img src="food_icons/burger.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(2) "><img src="food_icons/butter.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(3) "><img src="food_icons/carrot.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(4) "><img src="food_icons/cheese.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(5) "><img src="food_icons/cherries.gif" height="32" width="32" alt="img" hspace="4" border="0"></a><br>
<a href="" onMouseOver="ShowSource(6) "><img src="food_icons/hotdog.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(7) "><img src="food_icons/icecream.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(8) "><img src="food_icons/lemon.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(9) "><img src="food_icons/pizza.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(10)"><img src="food_icons/salad.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<a href="" onMouseOver="ShowSource(11)"><img src="food_icons/sammawich.gif" height="32" width="32" alt="img" hspace="4" border="0"></a>
<form name="form01">
<input type="text" name="input01" value="" size="70">
</form>
<a href="javascript:NumberofImages()">Click here</a> for number of images on this page.
</center>
</body>
</html>
This demonstrates (more or less) the image array. The image array is an array of all the images on a page: images[]. The browser isn't necessarily interested in what the pictures are, so it numbers them, starting with 0. The first image is images[0], the second is images[1], the third is images[2], etc. The array as a whole has properties, one of which is length. This is demonstrated in the text link that throws up the number of images on the page. Each individual image also has properties of its own, such as src (source). This is demonstrated by the function ShowSource(). We pass the index number to the function and it displays that image's source in the text box.
Understand that arrays can be a little confusing, so if it seems a little foggy, that's normal. It will sink in soon.
Exercise: Alter the previous example so that there are only the images on the page. When the user clicks on an image, an alert box pops up with something like this...
You picked image indexed 3 out of 12 total images. It's source is C:\path\path\burger.gif
Even though you know there are 12 total images on the page, I don't want you to hard code "12" into the function. I want you to get that number from the length property of the image array object.
Another property of individual images is the name property. In an image tag, we can give an image a name like so...
<img src="mypic.gif" height="32" width="32" name="myimg">
We can then use it in a script (for example, to get that image's source)...
window.document.images["myimg"].src
Notice that now we have two ways to specify a particular image in the image array... by number, or by name. Study on that until you understand it.
Exercise: Make a new web page using the 12 food icons. Give each image a name. Make it so that when the user clicks on an image, an alert box pops up with that image's source. Get the source by referencing the image by name, not by index number.
We passed the image name to the function. The function then used it to determine the source of that image. Keep studying the example until it's clear.
Hint: use a single quote ' inside of a double quote ". Here is an example...
<a href="javascript:myFunc('joe')">
Using the following will confuse the browser and generate an error.
<a href="javascript:myFunc("joe")">
| Javascript Tutor |
| Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
| Javascript Authoring Guide JavaScript FAQ |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
