Your Electronic Books

Unless you??™re prepared for subsequent
layout elements to shift upon each visit to the page, aim to export all your images
with equal dimensions. Should this not be an option, try to keep the same height setting.
Note, however, that you can use different file formats for the various images. It??™s good
housekeeping to keep these images in their own folder, too; for this exercise, the images
are placed within assets/random-images.
WORKING WITH IMAGES
139
4
Required files The image-randomizer-starting-point folder from the chapter
4 folder.
What you??™ll learn How to create an image randomizer using JavaScript.
Completed files The image-randomizer-javascript folder in the chapter 4 folder.
1. Edit the HTML. Open randomizer.html. In the body of the web page, add the following
img element. The src value is for the default image, and this is what??™s shown
if JavaScript is unavailable. The id value is important??”this is a hook for both the
JavaScript function written in steps 4 through 6 and a CSS rule to add a border to
the image.
?? name="randomImage" height="300" width="300" />
Next, add an onload attribute to the body start tag, as shown in the following code
block. Note that the value of this attribute will be the name of the JavaScript
function.

2. In randomizer.js, create arrays for image file names and alt attribute values.


Pages:
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224