FrontPage Newsletter Article
July 2002
Making the Script Work for All Pages
While FrontPage will very kindly update the links between files as you move
them in and out of subdirectories, it will not update any links that are part of
a JavaScript.
This means that if you now save the page with your beautifully working script
to a subdirectory, it will not work at all. This is due to the relative links in
the script, which will still be looking for
images/nav1_on.gif
when in fact the path to the image should now be
../images/nav1_on.gif
You could carefully edit the script and the html on the new page to correct
the file paths. However, apart from being laborious, this will mean that you
cannot use the navigation in an include page that is called from different
directories at different levels. The best solution I have found is to use the
full URL in all image paths and in link paths. You will obviously have to have
uploaded your images to the server for this to work.
So, the paths in the head part of the script will become:
image1 = new Image();
image1.src = "http://www.mysite.com/images/nav1_on.gif";
And those in the body will become
<a href="http://www.mysite.com/index.htm"
onmouseover="image1.src='http://www.mysite.com/images/nav1_on.gif';"
onmouseout="image1.src='http://www.mysite.com/images/nav1_off.gif';">
<img name="image1" src="http://www.mysite.com/images/nav1_off.gif"
border=0>
</a>
Remember that if you are going to use the navigation as an include page, you
will need to place the portion of the script that would normally be in the
<head></head> section of the page after the <body> tag.
Need Extra Buttons?
The easiest way to do this, even if you are not terribly happy editing code,
is to go into the HTML and add them yourself. This requires only a minimal
amount of editing and is very easy to do.
Say you want to add a fifth button to the bar above. First in the part in the head copy
this line:
--------------------------------
image1 = new Image();
image1.src = "images/nav1_on.gif";
--------------------------------
And paste below all your other buttons to get this:
-------------------------------
image4 = new Image();
image4.src = "images/nav4_on.gif";
image1 = new Image();
image1.src = "images/nav1_on.gif";
---------------------------------
Now edit all the 1 bolded above to 5 to get this:
--------------------------------
image4 = new Image();
image4.src = "images/nav4_on.gif";
image5 = new Image();
image5.src = "images/nav5_on.gif";
----------------------------------
(This presupposes you have already created the images for button 5 and named
them in the same way as the others)
Now do the same in the body part- copy this line and paste it, then replace all
the 1's with 5's again. You also need to edit the link in this case. So you
start by pasting this into the HTML for your new button:
-----------------------------------
<a href="index.html" onmouseover="image1.src='images/nav1_on.gif';"
onmouseout="image1.src='images/nav1_off.gif';">
<img name="image1" src="images/nav1_off.gif"
border=0></a>
-------------------------------------
And edit it to this:
----------------------------------
<a href="anotherpage.html" onmouseover="image5.src='images/nav5_on.gif';"
onmouseout="image5.src='images/nav5_off.gif';">
<img name="image5" src="images/nav5_off.gif"
border=0></a>
-----------------------------------
Other Generators and Scripts
The process for adding additional buttons described above can be tiresome if
you have a lot of buttons. You may wish to tackle a more elaborate generator
such as the Mighty Mouseover Machine (MMM), which will not only allow you to add
as many buttons as you wish, but will arrange the output in a table for you and
even allow you to create a script with a second image changing elsewhere on the
page as each button is moused over.
The MMM takes a bit of getting used to, but if you have successfully managed
the process above you should, with a little practice, have no trouble getting it
to produce excellent results for you.
Mighty
Mouseover Machine
(Do read the instructions first!)
You will also find many pre-made JavaScripts for rollover button menus. Now
that you have some practice it should be easy for you to customize these for
your pages. Some good places to start looking are:
HotScripts
Lots of different style of navigation scripts to choose from.
http://www.hotscripts.com/JavaScript/Scripts_and_Programs/Navigation/
The JavaScript Source
http://javascript.internet.com/navigation/
Dynamic Drive
There are a number of different mouseover effect scripts at this page.
http://www.dynamicdrive.com/dynamicindex15/index.html
Katherine Nolan
OutFront Moderator
http://www.inkkdesign.com
