HTML and CSS Reference
In-Depth Information
Creating the Navigation Bar
The first step in updating the Hickory Oaks Forest Preserve Web site is to create the
graphics needed for the buttons. In this case, a graphic designer has created and supplied
the images. The button image names should relate to the mouse state: up, down, or over.
The navigation bar is an HTML table with one table row (<tr>), and four table data
cells (<td>) that will contain the images (<img>) and event handlers to call a user-defined
function to change the button depending on the action of the mouse. In addition, in each
table data cell, an anchor tag (<a href>) makes the image a link to another Web page.
Within each table data cell the <img> tag contains an id attribute to identify that
image as an object. Table 11-1 reviews the general form of the <img> tag.
Making Web Pages
Dynamic with DOM
Using JavaScript takes
away the dependence
on the server to produce
interesting effects and
animation on a Web page.
As the content of the Web
page grows or changes,
so does the appearance
and presentation of the
Web page.
Tag Name Attribute
Because the name
attribute is deprecated in
HTML5 for the <img> tag,
JavaScript must use the
getElementByID method
to access the image object.
Table 11-1 General Form of <img> Tag to Create Image Object
General form:
<img src=“img_Filename” id=“Object_name” alt=“alternative text” />
Comment:
where the
source
(img_Filename) represents the filename of the image that initially is displayed
at the location where the tag appears. The
id
attribute identifies the object for JavaScript. To
be HTML5 compliant, <img> tags need an
alt
attribute, which is alternative text that appears if
the graphic does not load. In addition, HTML5 requires that empty tags like <img> must include
the closing / symbol within the tag.
Example:
<img src=”chapter11-1home_up.gif” id=”home” alt=”home” />
Table 11-2 shows the code to enter the HTML table to create the image objects
for the image rollover navigation bar.
Table 11-2 HTML Code to Create the Table to Contain a Navigation Bar
Line
Code
<table class=”centerItems”>
66
<tr>
67
<td>
68
<a href=”#”>
69
<img src=”chapter11-1home_up.gif” id=”home” alt=”home”/></a>
70
</td>
71
<td>
72
<a href=”chapter11-1centersolution.html”>
73
<img src=”chapter11-1center_up.jpg” id=”center”
alt=”nature center”/></a>
74
</td>
75
<td>
76
<a href=”chapter11-1shopsolution.html”>
77
<img src=”chapter11-1shop_up.jpg” id=”shop” alt=”gift shop”/></a>
78
</td>
79
<td>
80
