I hope the page does not take too long to download, I felt it preferable to keep everything on the one page rather than split it into two.
Please let me know if mistakes are found

Explanation of Terms
Original Image Source - this is the image that initially appears on your page.

Mouse Over Image Source - this is the image that will show when the mouse hovers over the first image.

OnMouseDown Image Source - The OnClick Image is the image that appears when the viewer clicks down on the button with their mouse. If you do not want one to appear, simply use the same url/image name as the original image.

Button Link - the page you wish the viewer to go to when they click on the image.

Alternate text - this will show when mouse hovers over the image.

Target - by default this will always show _self which means the linked page will open in the same browser window.

What to type in the boxes.
Images
Where it shows the http:// in the text boxes, you will need to delete the http:// from the three image text boxes and type in the image file paths (known as the "relative" path as it is relative to the location of your page within your web).
You only use the http:// if the image is kept on a different website altogether (known as "absolute" file path as it includes not only the file name but the website address as well). (see note below)
As you type in the name of the first image, it automatically copies it into the third box as both boxes refer to the same image (shown in red on screenshot below). If you want a different image when you click down on the picture, then change the third box details.

Button Link
If you are linking to another website then use the absolute file path - just add the www.mysite.com after the http://. If you are linking to a page within your own site, then use the relative file path - similar to how you put the file path for your images. (see note below)

Target
If you want the linked page to open in a new browser window then delete the _self and type in _blank

NOTE: if you use the code in a shared border or in an "include" component page, then you may find the code will not work on all pages using relative file paths - in which case use the absolute path for image buttons and links. Also, the code that goes into the head of the document, put just under the Body tag of the document of the "include" or shared border page. Front page only reads code within the body tags of those pages, not anything in the Head tags. Normally Front Page would update links to images and files within your own web, but because it did not create this code in the first place, and because it is not HTML but Javascript, this does not always happen. Sometimes Front Page will update javascript links .... other times it wont !!! 

If you are doing more than one mouse-over DO NOT click on the finish button, but click on the NEXT button. Code for all your buttons will be produced at the end. Note that the screenshot above says BUTTON NUMBER 1.
Here is screen shot of your completed BUTTON NUMBER 2

As you have noticed, the screenshot above says BUTTON NUMBER 2 on the top of it. Let's assume that you have now finished. Click on the finish button and the code for both buttons will now be produced, as shown below.

For identification purposes I have coloured part of the code red and the "copy text" in a yukky blue, they will not appear coloured in the programme itself.

Look at the code on the right under the heading of BODY. If you had done your two buttons individually, then both would be called <!--Button Number 1--> and the mouse overs would not work. Each mouse over must be given a different name in the code. Notice also in the code for the second button that ('name0') has been replaced with ('name1').

If you find, that having created all your buttons, you need to add one more, then create the code for the button, but change those references to a number not already in use.

Alternatively, you can save your project. It is an idea to do this, even if you think you have finished it. Any later additions or alterations can then just be added and the altered code will be produced.

Copy code
You cannot highlight and copy the code. You have to click on the "Copy Text" link (shown in yukky blue). That will automatically copy it to your clipboard.

Head Code
Copy that first. Go into HTML view and up near the top find the closing head tag - </head>
Paste the code above that closing tag. (if using mouse over code on a shared border or an "include" page, make sure you have read this note)

Body Code
Again, you have to click on "Copy Text" for the code to be copied to the clipboard.
Have your web page open in "normal view".
Left click on the page  where you want your buttons to appear.
Now right click and select "Paste Special".
Then check the box for -  Treat as HTML. Alternatively, go into HTML view and paste directly into that.

Hey presto - all finished. If you go back to the start page, right click and "view source" you can see the actual code in action for a two-state mouse over (no extra image on click-down).

 back to top