HTML and CSS Reference
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
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
Tag Name Attribute
Because the name
attribute is deprecated in
HTML5 for the <img> tag,
to access the image object.
Table 11-1 General Form of <img> Tag to Create Image Object
<img src=“img_Filename” id=“Object_name” alt=“alternative text” />
where the source (img_Filename) represents the filename of the image that initially is displayed
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.
<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
<img src=”chapter11-1home_up.gif” id=”home” alt=”home”/></a>
<img src=”chapter11-1center_up.jpg” id=”center”
<img src=”chapter11-1shop_up.jpg” id=”shop” alt=”gift shop”/></a>