Hypertext Markup Language (HTML)

By Rob Miles
9/10/2021

Contents

An image display program

The final example program in this chapter shows how JavaScript can change the content of an image displayed on the screen. You can use this technique to implement “slide shows” and also allow the user to select images for display. The image to be updated must be given an ID:

    <img src="seaside1.JPG" id="pageImage"></p>

This img element displays the picture in the file seaside.JPG. A JavaScript program can change the displayed image by modifying the src attribute of the image and making it refer to a different image file:

var pic = document.getElementById("pageImage");
pic.src="fairground.JPG";

These two statements get a reference to the image and then set the src attribute of the img to refer to the image fairground.jpg. This will update the image displayed by the browser. Note that this is a repetition of a pattern that you’ve seen several times now. A program obtains a reference to a display element and then makes changes to it. You can find a complete image picker program in the Ch02-12 Image Picker example.

MAKE SOMETHING HAPPEN: CREATE YOUR OWN PAGES

You now know enough to create your own pages that contain timers, images, and buttons. Here are some ideas for you to think about:

Make a “mood” page The page will display buttons labeled “Happy,” “Sad,” “Worried,” and so on. When the user presses a button, the page will display an appropriate message and play a piece of appropriate music.
Make a “fitness” page Users will press a button to select an exercise length, and the page will display exercise instructions and start a timer for that exercise.
Make a slide show Users press a button, and the page will show a sequence of images. To do this, you can use a number of calls to setTimeout to trigger picture changes at different times in the future—perhaps one at two minutes, one at four minutes, and so on.

Save to your account