␡
- Random Picture Rotation with JavaScript
- How the Rotating Images Code Works
- The Coding Plan
- Some Key JavaScript Concepts
- Detecting the Load Event
- Triggering the Function from the Load Event
- Generating Random Numbers
- Creating the Image Path
- DOM Scripting
- Assembling the Image Element
- Adding the Image Element to the Page
- Reviewing the Working Page
- Summary
Like this article? We recommend
DOM Scripting
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
DOM Scripting
All we need to do now is to build the image element, including the selected image name, and add it to the page. Modifying the DOM with code is called DOM scripting. If you haven't tried your hand at DOM scripting, you may enjoy this step. DOM scripting turns a static page into a fluid canvas for the designer; using these techniques, the markup can be modified and the page thereby changed instantly.
The image element we need to assemble will look like this when it's in its final location in the page, nested inside its parent div:
<div id="display"><img alt="my old car" src="images/pic1.jpg"></div>
So far, all we have of the image element is the bit that's boldfaced—the path to the image (which, of course, will change each time the page loads).