HTML and CSS Reference
In-Depth Information
Plan
Ahead
Creating an automatic slide show.
Instead of having only one image on a page, many Web sites include slide shows to display
multiple images. The intent is to grab the visitors' attention and keep them on the page. To
include a slide show that will start automatically when the Nature Center page opens, you
need to do the following:
Determine the location for an image object
•
•
Determine the images to be used
•
Write the user-defined JavaScript function using the following logic:
1. Define a list of images in an array object
2. Establish a counter
3. Increment the counter by 1
4. Test the counter against the number of items in the list
5. Assign the list element, based on the current counter value, to the image object
6. Call the function again using the setTimeout() method
Add the event handler to call the function
•
Creating a Slide Show on the Nature
Center Web Page
As shown in Figure 11-1b on page HTML 509, the Nature Center Web page contains a
slide show. A
slide show
is a set of images, all the same size, that are displayed in the same
location for a few seconds, one after the other, to create the appearance that the images
are rotating. The slide show in this chapter continuously runs, with no controls.
To Open an Existing HTML File in Notepad++
In this chapter, the partially completed HTML code for the Nature Center
Web page is provided in the Data Files for Students. To modify this Web page, the file
chapter11-1center.html must be opened in a new Notepad++ window.
1
If necessary, start Notepad++.
2
Open the chapter11-1center.html file in the Chapter11\ChapterFiles folder.
To Copy and Paste the Navigation Bar, Event Handlers,
and Image Rollover Functions
To maintain consistency in looks among all the Web pages, the Nature Center Web
page should use the same navigation bar created for the Hickory Oaks Forest Preserve
Home page.
1
If necessary, open the chapter11-1homesolution.html file in Notepad++.
2
Copy the HTML <table> code from lines 97 through 116 to copy the navigation bar.
3
Click line 63 in the chapter11-1center.html file and paste the code to insert the navigation
bar from Table 11-2 on page HTML 512 into the Nature Center Web page file.
