Image switching with onclick

This program shows how to switch an image using the onclick event handler.

Programming Issues

There are no HTML forms in this example, just an image. The onclick event handler calls the changeImage() function to switch back and forth between an image of the Earth and an image of Mars.

We set up a variable, newsrc to hold the filename of the image we will switch to next. The page loads with the Earth showing, so we initialise this to "mars.jpg". When changeImage() is called, we examine the contents of newsrc, and if, for instance, it contains "mars.jpg", we change the src of the image to this, change the alt text of the image to "Mars" and set newsrc to contain "earth.jpg" in preparation for the next time changeImage() is called.

Note: for simplicity, this example does not use image pre-caching.

Demonstration

Earth

Source and Downloads