Creating JavaScript
Rollover Buttons - Part III
FrontPage Newsletter Article
July 2002
Putting the Code in Your Pages
First take the entire code in the text area, copy it into a Notepad file and
save it.
Before doing
anything with the code you have made fire up a new page in FrontPage and take a look in html view.
You will see that there are tags there delineating the head section of the page
(<head></head>) and the body section (<body></body>).
Now, open your Notepad file and paste the part of the code that looks like
this into the <head></head> section.:
---------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
image1 = new Image();
image1.src = "images/nav1_on.gif";
image2 = new Image();
image2.src = "images/nav2_on.gif";
// End -->
</script>
----------------------------------
You will have more buttons than that, but it is important that you paste
everything from
<SCRIPT LANGUAGE="JavaScript"> to </script> into the head
section of your page.
Now take the bit that looks like this after the <body> tag:
---------------------------------
<a href="index.htm" 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>
<a href="folder/file.htm" onmouseover="image2.src='images/nav2_on.gif';"
onmouseout="image2.src='images/nav2_off.gif';">
<img name="image2" src="images/nav2_off.gif"
border=0></a>
etc for all your buttons
-------------------------------------
If you go to normal view you will find that your buttons are lined up side by
side instead of one beneath the other. Simply position them correctly in normal
view by using Shift+Return between each one to move them to new lines.
Now preview your page - if all has gone well you have rollover buttons!!
Your buttons are now in splendid isolation on the page, but you can just
paste that HTML into a table cell to position it as you wish in your page
layout.
Not working?
The most common reason for this is that you did not enter the paths to the
images correctly.
If the page you are working on is in the same folder as your index page then
the path to each image will be in the format:
images/nav1_off.gif
If your page is in a subfolder you will need to edit the paths to read:
../images/nav1_off.gif
Another common reason for things not to work is a misspelling in some of the
information you entered in the form. I once spent a long time trying to figure
out why one button would not work only to eventually realize that I had, when I
entered it, spelt 'images' as 'inages'. The script was looking in vain for a
folder called 'inages'.
Thinking about paths brings up another issue - how will the menu
work in subdirectories and folders within your site?
>> Part IV: Making it Work Throughout Your Site
<< Part II: Creating the JavaScript
|
