Here's a very typical kind of site layout. Let's suppose this is a page from a wood-working site that deals with one project. There would be a page just like this for every project on the site.

Building a Marionette

It's easy to build your kids a lovely marionette.

Click on the buttons, below, to get get some great tips for your project.

Don't bother clicking on the mouse-over buttons, since they all point to this page! On a real site, they would point to generic tips about each of the topics. There's quite a bit of code involved in making this kind of navigation tool, and it's a mixture of HTML and JavaScript. Here's what the code looks like...

<!-- Navbar def -->
<script language="JavaScript">
<!-- Dummy comment to hide code from non-JavaScript browsers.
if (document.images) {
Button1MouseOff = new Image(); Button1MouseOff.src = "Button1.gif"
Button1MouseOver = new Image(); Button1MouseOver.src = "Button1MouseOver.gif"
Button1MouseDown = new Image(); Button1MouseDown.src = "Button1MouseDown.gif"
Button2MouseOff = new Image(); Button2MouseOff.src = "Button2.gif"
Button2MouseOver = new Image(); Button2MouseOver.src = "Button2MouseOver.gif"
Button2MouseDown = new Image(); Button2MouseDown.src = "Button2MouseDown.gif"
Button3MouseOff = new Image(); Button3MouseOff.src = "Button3.gif"
Button3MouseOver = new Image(); Button3MouseOver.src = "Button3MouseOver.gif"
Button3MouseDown = new Image(); Button3MouseDown.src = "Button3MouseDown.gif"
Button4MouseOff = new Image(); Button4MouseOff.src = "Button4.gif"
Button4MouseOver = new Image(); Button4MouseOver.src = "Button4MouseOver.gif"
Button4MouseDown = new Image(); Button4MouseDown.src = "Button4MouseDown.gif"
}
function turnMouseOff(ImageName) {
   if (document.images != null) {
      document[ImageName].src = eval(ImageName + "MouseOff.src");
   }
}
function turnMouseOver(ImageName) {
   if (document.images != null) {
      document[ImageName].src = eval(ImageName + "MouseOver.src");
   }
}
function turnMouseDown(ImageName) {
   if (document.images != null) {
      document[ImageName].src = eval(ImageName + "MouseDown.src");
   }
}
// End of dummy comment -->
</script>
<center>Click on the buttons, below, to get get some great tips for your project.<br>
<table name="XaraTable" border="0" cellpadding="0" cellspacing="0">
<!-- shim row--><tr><td><img src="shim.gif" width="16" height="1" border="0"></td>
<td><img src="shim.gif" width="114" height="1" border="0"></td>
<td><img src="shim.gif" width="9" height="1" border="0"></td>
<td><img src="shim.gif" width="114" height="1" border="0"></td>
<td><img src="shim.gif" width="9" height="1" border="0"></td>
<td><img src="shim.gif" width="114" height="1" border="0"></td>
<td><img src="shim.gif" width="9" height="1" border="0"></td>
<td><img src="shim.gif" width="114" height="1" border="0"></td>
<td><img src="shim.gif" colspan="2" height="1" border="0"></td> </tr>
<!-- Row 1 --><tr>
<td rowspan="2"><img name="r1c1" src="r1c1.gif" width="16" height="65" border="0"></td>
<td><img name="r1c2" src="r1c2.gif" width="114" height="20" border="0"></td>
<td rowspan="2"><img name="r1c3" src="r1c3.gif" width="9" height="65" border="0"></td>
<td><img name="r1c4" src="r1c4.gif" width="114" height="20" border="0"></td>
<td rowspan="2"><img name="r1c5" src="r1c5.gif" width="9" height="65" border="0"></td>
<td><img name="r1c6" src="r1c6.gif" width="114" height="20" border="0"></td>
<td rowspan="2"><img name="r1c7" src="r1c7.gif" width="9" height="65" border="0"></td>
<td><img name="r1c8" src="r1c8.gif" width="114" height="20" border="0"></td>
<td rowspan="2"><img name="r1c9" src="r1c9.gif" width="21" height="65" border="0"></td>
<td><img src="shim.gif" width="1" height="20" border="0"></td></tr>
<!-- Row 2 --><tr>
<td><a href = "StartHere.htm" onmouseover="turnMouseOver('Button1')" onmouseout="turnMouseOff('Button1')" onmousedown="turnMouseDown('Button1')"><img name="Button1" src="Button1.gif" alt="" width="114" height="45" border="0"></a></td>
<td><a href = "StartHere.htm" onmouseover="turnMouseOver('Button2')" onmouseout="turnMouseOff('Button2')" onmousedown="turnMouseDown('Button2')"><img name="Button2" src="Button2.gif" alt="" width="114" height="45" border="0"></a></td>
<td><a href = "StartHere.htm" onmouseover="turnMouseOver('Button3')" onmouseout="turnMouseOff('Button3')" onmousedown="turnMouseDown('Button3')"><img name="Button3" src="Button3.gif" alt="" width="114" height="45" border="0"></a></td>
<td><a href = "StartHere.htm" onmouseover="turnMouseOver('Button4')" onmouseout="turnMouseOff('Button4')" onmousedown="turnMouseDown('Button4')"><img name="Button4" src="Button4.gif" alt="" width="114" height="45" border="0"></a></td>
<td><img src="shim.gif" width="1" height="45" border="0"></td></tr>
<!-- Row 3 --><tr>
<td colspan="9"><img name="r3c1" src="r3c1.gif" width="520" height="20" border="0"></td>
<td><img src="shim.gif" width="1" border="0"></td></tr>
</table></center>
<!-- Navbar def end -->
Keep in mind that this is not the code for the entire page, but only for the mouse-over button bar and the single line of text above it. These are perfect candidates for JavaScript Maker automation, since they appear on a lot of pages, and you might need to change the navbar, over time.

All you need to do is select the code that you want to automate (in this example, it's the code you see, above) and save it as a separate file. Then, use JavaScript Maker to create a function from that code. To see how the function is used, click here.