Lesson Twelve: Loading Images with JavaScript

Create a subfolder in your jhistorytree folder and name the folder images. Copy these images to the images subfolder:

Enter this code in your HTML file just above the reset button code:

<img id="i1" src="images/compass2.png" alt="History Tree Compass Image" >
<img id="i2" src="images/compass2.png" alt="History Tree Compass Image" >
<img id="i3" src="images/compass2.png" alt="History Tree Compass Image" >
<img id="i4" src="images/compass2.png" alt="History Tree Compass Image" >
<img id="i5" src="images/compass2.png" alt="History Tree Compass Image" >

Test your program with the new code. Your page should look like this:

In your JavaScript file add these variables under the last variable var eventchoice;.
```
var image1 = "images/mollusk1.jpg";
var image1alt = "Mollusk Picture";
```
Also in your JavaScript file add this code under button.value = event1; }.
```
img = document.getElementById("i1");
img.src = image1;
img.alt = image1alt;}
```
Note: you must remove the bracket } after the button.value = event1;

The new block of code should look like this:

if (eventchoice == 1) {
button = document.getElementById("b1");
button.value = event1;
img = document.getElementById("i1");
img.src = image1;
img.alt = image1alt;}

Test your program with the new code. Click the first button:

This code works exactly like the code that you used to load the new value to the button object. The only difference is that with the image object you are using the src property and the alt property.
To test the alt property rename the mollusk1 image (in the images folder) to mollusk1sav and execute the program again. The image should be replaced with the text in the image1alt variable.
See if you are able to add the code to load the other images. Your program should work like this sample: Sample

Lesson Thirteen: Writing to Other Elements - innerHTML

Coding

Lesson Twelve: Loading Images with JavaScript