1998 on the Web Home Technology Diary 1998 Predictions Tips and Tools Awards to Win Your Comments  



Constructing a Dynamic HTML Navigation Bar

Several readers of 1998 on the Web have commented they like the Navigation Bar on the top of this page. Here's how it was done. The simple two-step process involved creating the graphics with the navigation option text, and then coding the DHTML JavaScript that executes the onmouseover and onmousedown functions. The rollover effect displays the color change in the Netscape Navigator 3+ and Microsoft Internet Explorer 4+ browsers. In other browsers it is simply a static graphic.

I used the Paint Shop Pro shareware from Jasc Software to create on/off/click text graphic gifs for the bar. When the mouse is off, the text color is white, and when the mouse moves over the graphic, or on, the gif switches to green. When clicked, it lights up. Using compression techniques built in the Paint Shop Pro software, I was able to keep the size of each gif to a few hundred bytes for quicker loading.

Placing the Navigation Bar on the Web pages involves defining each of the on/off/click graphics in JavaScript and describing the turnOn, turnOff, and clickOn functions. Then for alignment, I put the graphics in a table across the top of the page. In the table I use the onmouseover, onmouseout, and onmousedown HTML function calls to invoke the turnOn, turnOff, and clickOn functions. You can see the actual code below.

I hope this tip is helpful, and you can create something even better on your own Web page. Let me know how it goes.

Add this <SCRIPT> tag to the top of the <BODY> section of your page to define and preload the gifs and describe the functions.

<script language="JavaScript">
<!--
if (document.images) {
image1on = new Image(); image1on.src = "homeon.gif";
image2on = new Image(); image2on.src = "diaryon.gif";
image3on = new Image(); image3on.src = "predon.gif";
image4on = new Image(); image4on.src = "tipson.gif";
image5on = new Image(); image5on.src = "awardon.gif";
image6on = new Image(); image6on.src = "common.gif";
image1off = new Image(); image1off.src = "homeoff.gif";
image2off = new Image(); image2off.src = "diaryoff.gif";
image3off = new Image(); image3off.src = "predoff.gif";
image4off = new Image(); image4off.src = "tipsoff.gif";
image5off = new Image(); image5off.src = "awardoff.gif";
image6off = new Image(); image6off.src = "commoff.gif";
image1click = new Image(); image1click.src = "homeon1.gif"";
image2click = new Image(); image2click.src = "diaryon1.gif"";
image3click = new Image(); image3click.src = "predon1.gif"";
image4click = new Image(); image4click.src = "tipson1.gif"";
image5click = new Image(); image5click.src = "awardon1.gif"";
image6click = new Image(); image6click.src = "common1.gif"";
}
function turnOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src"); }}
function turnOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src"); }}
function clickOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "click.src"); }}
// -->
</script>

Put the <TABLE> tags in the <BODY> section of your page to layout the navbar.

<div align="left">
<table border="0" cellpadding="3" cellspacing="0" width="500"
bgcolor="#000000">
<tr>
<td width="16">&nbsp;</td>
<td width="70"><a href="index.htm"
onmouseover="turnOn('image1')"
onmouseout="turnOff('image1')"
onmousedown="clickOn('image1')"><img src="homeoff.gif"
alt="1998 on the Web Home" border="0" width="70"
height="20" name="image1"></a></td>
<td width="70"><a href="diary.htm"
onmouseover="turnOn('image2')"
onmouseout="turnOff('image2')"
onmousedown="clickOn('image2')"><img src="diaryoff.gif"
alt="Technology Diary" border="0" width="70" height="20"
name="image2"></a></td>
<td width="70"><a href="predict.htm"
onmouseover="turnOn('image3')"
onmouseout="turnOff('image3')"
onmousedown="clickOn('image3')"><img src="predoff.gif"
alt="1998 Predictions" border="0" width="70" height="20"
name="image3"></a></td>
<td width="70"><a href="tiptool.htm"
onmouseover="turnOn('image4')"
onmouseout="turnOff('image4')"
onmousedown="clickOn('image4')"><img src="tipsoff.gif"
alt="Tips and Tools" border="0" width="70" height="20"
name="image4"></a></td>
<td width="70"><a href="awards.htm"
onmouseover="turnOn('image5')"
onmouseout="turnOff('image5')"
onmousedown="clickOn('image5')"><img src="awardoff.gif"
alt="Awards Won" border="0" width="70" height="20"
name="image5"></a></td>
<td width="70"><a href="comments.htm"
onmouseover="turnOn('image6')"
onmouseout="turnOff('image6')"
onmousedown="clickOn('image6')"><img src="commoff.gif"
alt="Your Comments" border="0" width="70" height="20"
name="image6"></a></td>
<td width="30">&nbsp;</td>
</tr>
</table>
</div>

   E-mail the Author    View WebTracker Statistics

Copyright 1997, 1998 Internet Brothers . All Rights Reserved.