HTML Radio Buttons Change Images
Let's do it again but swap two images this time.
The following snippets are from this page:
input statements in a
form should have the same
name and that name should be a single character. The
id of the main image should correspond to this
name/id should be different for each
form. In this example the
name/id is the letter
preLoad function each image is assigned a unique label. The first character of the label corresponds to the
name/id used in the form. The
input statements in the
body invoke function
im passing the appropriate label. In function
im we concatenate
to the label and evaluate it to obtain the image path. Using the first character of the label (
image) this path is assigned to the main image.
Labels such as
a2 serve a dual purpose. The first character of the label (
a) indicates the
id of the
img statement in the
body of the document. And if we concatonate the entire label (
.src we have the variable that contains a path to the image (
a2.src). In other words the label establishes a relation between the
img statement and a path to the image.
Allocating images and using the first character as an
id simplifies code in the body. Pre-allocating them in the
preLoad function also has the advantage that images are fetched before the body executes. As a consequence they will display quickly when referenced. Setting
autocomplete="off" in the
form causes it to properly reset if the page is refreshed. I suggest you use your browser to view the source of this page.