Random Images with Text - Better

This is called the Better version because it is more sophisticated and flexible in how the JS accomplishes its goal.

Sending the ids of the desired tags/elements (in this case, the id of the targeted image, which is 'theImage', as well as the id of the targeted text span, which is 'theDesc') to function showImage is a very useful method that helps prepare you for future JS examples we'll encounter in this course.



This version of random image JS was written by Daniel Arce, after code by Don Sinclair. Updated by Nadine Wettlaufer.

Here is the Random Image -- one of 1, 2, 3, or 4, with accompanying text:

random image





Reload this page, and see a different random image








Note:
on this page, there is a CSS rule that sets ALL images on this page to have a border, using img as a selector.
If you DO NOT want all images on the page to have a border, delete the img CSS rule in the style tags.


Here are the 4 images you need for this example to work.
Download them and then save them all in a folder called images, which should sit in the same folder as your html page: