HTML and CSS Reference
In-Depth Information
4
Modify line 66 to replace the # symbol with chapter11-1homesolution.html .
5
Modify line 70 to replace chapter11-1centersolution.html with the # symbol.
6
In the chapter11-1homesolution.html file, copy the JavaScript code from lines 6 through 22.
Return to the chapter11-1center.html file and insert the copied code for the navigation
bar image rollovers on line 6 and then press the e n t e r key. On line 23 type //--> ,
and press the e n t e r key. On line 24 type </script> and do not press the e n t e r key
(Figure 11-15).
Nature Center Web page
opened in Notepad++
JavaScript section with
code for navigation
bar image rollovers
Figure 11-15
Creating and Placing an Image Object
The first step in creating a slide show is to determine the location of the slide
show images. To define the image for the user-defined function, you must add the name
attribute and value. The name attribute allows JavaScript to assign a new graphic image
to the same location as the original image. This technique is the same as in Table 11-1
on page HTML 512. A new graphic file is assigned the image placeholder as described in
Table 11-3 on page HTML 514.
To Create an Image Object
The initial image is placed following a <p> tag in the body of the text. The id attribute will be used by the
getElementById() method to assign a new image to this location. In addition, an id selector in the embedded style
sheet will make the image “float” to the left of the text. Table 11-11 shows the HTML code to place the image
object in the data cell in the Web page.
Table 11-11 Code to Enter the <img> Object for the Slide Show
Line
Code
105
<img src=”chapter11-1elm.jpg” alt=”slide show” id=”slideHolder”>
 
Search WWH ::




Custom Search