UO/E Web Tips

How To Create a MouseOver Button

Adding Mouseover buttons to your Web pages
for publishers on outreach.missouri.edu

Below are a couple of examples of MouseOver buttons.
Both of them are links to http://outreach.missouri.edu

Here's how you do it:

First, find the two images you are going to use. The first image will appear on the page, and the second image will replace the first one when the mouse is over it.
Open the page you wish to edit in Microsoft FrontPage editor.
Copy all of the Javascript below that is in between the two script tags - including the script tags ( <SCRIPT> </SCRIPT> ). In FrontPage, click on the HTML tab at the bottom of the editor to view the HTML code of your page. Paste the Javascript in anywhere in between the header tags ( <HEAD> </HEAD> ) which are near the top of the code.
Next, copy the code below which comes after the closing script tag. Paste this in between the body tags ( <BODY> </BODY> ) where you want the MouseOver button to appear on your page.
Now all you have left to do is to edit a few parts of the script to specify the name of the image you are using.   Everything you will need to edit is found in the red highlighted sections of the script below.

Let's take a look at the first section;
    exampleOff = new Image();
    exampleOff.src = path + "image1.gif";
    exampleOn = new Image();
    exampleOn.src = path + "image2.gif";

The "example" at the beginning of each line is simply a title for the image, and you can change it to whatever you want. You will refer back to this in the next section. Next, where it says 'image1.gif' in quotation marks, you will put the URL of the first image you plan to use. Two lines down, where it says 'image2.gif' in quotation marks, you will put the URL of the second image you plan to use.

Here's the second section;
<a href="http://outreach.missouri.edu" ONMOUSEOVER="on('example')"
ONMOUSEOUT="off('example')"><img src="image1.gif"
name="example"></a><p>

The portion where it says; href="http://outreach.missouri.edu"    only makes the Mouseover button a link and can be omitted if desired. The three places where the word "example" is highlighted red refers back to the title you gave your image in the previous section. This reference must match the title given to the image in the Javascript. The last thing you will need to change is to put in the URL of the first image you plan to use where "image1.gif" is highlighted green.
If you want to put in another Mouseover button, you will need to copy the first section we just went over, give the image a different title, and specify the image you are using. Put it in the same place. Then you will need to copy the second section we just went over into the body of your page and modify it accordingly.

Here's the Script!!!!

<SCRIPT LANGUAGE="JavaScript">

<!--
browserName = navigator.appName;
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) version = "n3";
else {
        if (browserName == "Microsoft Internet Explorer" && browserVer >=
4) version = "ie4";
        else {
            if (browserName == "Microsoft Internet Explorer" &&
browserVer > 3 &&
navigator.appVersion.indexOf("Macintosh") != -1) version = "ie4";
            else version = "n2";
        }}
path = "";

if ((version == "n3") || (version == "ie4")) {
    exampleOff = new Image();
    exampleOff.src = path + "http://outreach.missouri.edu/webteam/tips/button-ex2.gif";
    exampleOn = new Image();
    exampleOn.src = path + "http://outreach.missouri.edu/webteam/tips/button-ex1.gif";

}

function on(imgName) {
        if ((version == "n3") || (version == "ie4")) {
                imgOn = eval(imgName + "On.src");
                document [imgName].src = imgOn;
        }}

function off(imgName) {
        if ((version == "n3") || (version == "ie4")) {
                imgOff = eval(imgName + "Off.src");
                document [imgName].src = imgOff;
        }}
//-->
</SCRIPT>


Return to the main Web Support page
		Kate Akers akersk@missouri.edu Last revised: 12/12/06