Modifying the XHTML Markup to Call the Functions - Page 8
June 14, 2002
To activate the JavaScript, we will adjust the XHTML markup to call the various
functions we've defined.
- Insert an onload event call in the <body>
tag that calls the choosebox() function, with 1 passed as the
argument.
<body onload="choosebox(1)">
Figure 12.5
When the page first loads, the first tab (tab1) is set to "active,"
and the first content box (box1) is on top.
-
Insert the onmouseover, onmouseout, and
onclick event calls from the div elements tab1, tab2,
tab3, tab4, and tab5. The tabover() function
is called onmouseover; the tabout() function is called onmouseout;
and the choosebox() function is called onclick. The appropriate
value for the tabnum argument is passed to the functions: for tab1
it's 1, for tab2 it's 2, and so on. The added
event calls are highlighted in the code.
<div id="tab1"
onmouseover="tabover(1)"
onmouseout="tabout(1)"
onclick="choosebox(1)">
<table summary="" cellpadding="0"cellspacing="0" border="0">
<tr>
<td width="8" height="24" class="tableft">
<img src="images/dot.gif"
alt=""
width="8"
height="24"
border="0" /></td>
<td id="tabmiddle1">overview</td>
<td class="tabright">
<imgsrc="images/dot.gif"
alt=""
width="7"
height="24"
border="0" /></td>
</tr>
</table>
</div>
<div id="tab2"
onmouseover="tabover(2)"
onmouseout="tabout(2)"
onclick="choosebox(2)">
<table summary="" cellpadding="0"cellspacing="0" border="0">
<tr>
<td width="8" height="24" class="tableft">
<img src="images/dot.gif"
alt=""
width="8"
height="24"
border="0" /></td>
<td id="tabmiddle1">overview</td>
<td class="tabright">
<imgsrc="images/dot.gif"
alt=""
width="7"
height="24"
border="0" /></td>
</tr>
</table>
</div>
<div id="tab3"
onmouseover="tabover(3)"
onmouseout="tabout(3)"
onclick="choosebox(3)">
<table summary="" cellpadding="0" cellspacing="0"border="0">
<tr>
<td width="8" height="24" class="tableft">
<imgsrc="images/dot.gif"
alt=""
width="8"
height="24"
border="0" /></td>
<td id="tabmiddle1">overview</td>
<td class="tabright">
<img src="images/dot.gif"
alt=""
width="7"
height="24"
border="0" /></td>
</tr>
</table>
</div>
<div id="tab1"
onmouseover="tabover(1)"
onmouseout="tabout(1)"
onclick="choosebox(1)">
<table summary="" cellpadding="0" cellspacing="0"border="0">
<tr>
<td width="8" height="24" class="tableft">
<img src="images/dot.gif"
alt=""
width="8"
height="24"
border="0" /></td>
<td id="tabmiddle1">overview</td>
<td class="tabright">
<img src="images/dot.gif"
alt=""
width="7"
height="24"
border="0" /></td>
</tr>
</table>
</div>
<div id="tab5"
onmouseover="tabover(5)"
onmouseout="tabout(5)"
onclick="choosebox(5)">
<table summary="" cellpadding="0" cellspacing="0"border="0">
<tr>
<td width="8" height="24" class="tableft">
<imgsrc="images/dot.gif"
alt=""
width="8"
height="24"
border="0" /></td>
<td id="tabmiddle1">overview</td>
<td class="tabright">
<img src="images/dot.gif"
alt=""
width="7"
height="24"
border="0" /></td>
</tr>
</table>
</div
CREATING THE TAB NAVIGATION SCRIPT (TABS.JS) - Page 7
JavaScript + CSS + DOM Magic
Modifying the XHTML Markup to Call the Functions (Cont.) - Page 9
|
