onMouseOver Image Effect Tutorial

Place your mouse over the image to see it change:

This is the effect this tutorial is going to teach you how to create yourself :)

Step 1 - Understanding your document structure.

An html document is made up of two sections: the head and the body. The basic html layout you might see would look something like this:

<html>
<head>
<title>Your Document Title Goes Here</title>
The HEAD of your html document goes here.
</head>
<body background="some_image.jpg" text="#000000" link="#ff0000" alink="#00ff00" vlink="#0000ff">
The BODY of your html document goes here.
</body>
</html>

When creating an onMouseOver effect you will need to place special coding in both sections of your document. This will be explained below.

Step 2 - The <HEAD></HEAD> coding.

The following listing is the complete coding you need to place inside the head section of your document for one onMouseOver effect. Do not be alarmed if it looks complicated because you only need to edit one little part to make this code work on your page.

We will now explain what each part of this code does:

These two lines inform the browser that the following information is Javascript and not html.

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

These lines check that the browser viewing this page can handle the javascript coding. Were it not for this code people using I.E. 3 and N.N. 2 (and all earlier) browsers would receive error messages when viewing your page.

//preload images:
if (browserVer == 1) {
a1 = new Image(107,36);
a1.src = "a1.jpg";
a2 = new Image(107,36);
a2.src = "a2.jpg";
}

This is the most important part of this code. This is where you define all the images you are using. This is the part you will need to edit to fit your own images. We will explain how to do this later on n the tutorial.

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}

These lines actually carry out the swapping procedure and display your comments in the status bar.

//end hiding -->
</script>

The final two lines inform the browser that the javascript has finished and that we are back working in html again.

Step 3 - Defining your images.

In this example we are using the following two images. a1.jpg is the image before you place your mouse over it and a2.jpg is the image you see once your mouse is over it:

a1.jpg	a2.jpg

Just to remind you, this is what the coding looks like when we define them both inside the head tags:

//preload images:
if (browserVer == 1) {
a1 = new Image(107,36);
a1.src = "a1.jpg";
a2 = new Image(107,36);
a2.src = "a2.jpg";
}

We will now look at a1.jpg in more detail. In the coding there are two lines that you will need to edit:

a1 = new Image(107,36);
a1.src = "a1.jpg";

The first line defines an image called a1 and specifies its width and height in pixels. 107 pixels is the width for the image in our example and 36 pixels is the height.
The second line defines the image file location a1.src so that the browser knows where to find it.
Note: you need to specify the proper path to your image. If the image was placed inside a directory called 'images' then the line would look like this:

a1.src = "images/a1.jpg";

You will need to create these two lines for every image you use in your onMouseOver effect. Each image must have a different name e.g. a1, a2, b1, b2 etc.

Step 4 - The <BODY></BODY> coding.

Now that you have defined your images you now have to place them inside your html as you would normally using an <img src=....> tag. The only difference in this case is the <a href=....></a> tags you place round your image:

First we will look at the image tag itself:

- It is essential that each image you use this effect on is given a unique name inside the image tag. In my example i use name="a" which corresponds to the fact that the images used are a1.jpg and a2.jpg.
- The src=.... attribute defines the initial image that you view when the document loads. As with the head coding this must be the proper path to the image.
- border=0 prevents a line being drawn around the image once you make it into a clickable link.
- width=.... and height=.... are just the image dimensions again.

Now you need to turn the image into a link using <a href=....></a> tags. The end tag is just </a> and this is placed directly after the image tag. The start tag contains all the information for the link, onMouseOver and onMouseOut effects like so:

- href=.... defines the page that the visitor will be taken to if they click on the image. This must be the proper path to the html file.
- onMouseOver=.... contains all the information required by the javascript function hiLite (as defined in the head section) when the mouse is placed over the image.
- onMouseOut=.... contains all the information required by the javascript function hiLite when the mouse is removed from the image.

To make it easier to understand how this works here is the hiLite function as displayed earlier:

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}

If you look at the second line you will see that there are 3 parameters contained inside the brackets: imgDocID, imgObjName and comment. If you look at the above code you will see that these correspond to the 3 values hiLite('a','a2','Your Comment Here') and hiLite('a','a1','').
The following table explains what each parameter is and where it comes from. The last two columns show the values for onMouseOver and onMouseOut in this example.

Parameter	Meaning	Derived From	onMouseOver	onMouseOut
imgDocID	The name given to the image in the img tag.	<img name="a"....>	a	a
imgObjName	The name of the image to be displayed as per the code in the head of your document.	a1 = new Image(107,36);	a2	a1
comment	The value of the text displayed on the status bar.	onMouseOver="....'Your Comment Here')	Your Comment Here

Step 5 - In conclusion.

For every image you code you need to define both the images in the head section of your document and change the values of these 3 parameters (for both onMouseOver and onMouseOut events) in the body. Using the basic html layout discussed in Step 1 your complete document would now look like this:

<html>
<head>
<title>Your Document Title Goes Here</title>
<script language="javascript">

</script>
</head>
<body background="some_image.jpg" text="#000000" link="#ff0000" alink="#00ff00" vlink="#0000ff">
<a href="mouseover.html" onMouseOver="hiLite('a','a2','Your Comment Here')" onMouseOut="hiLite('a','a1','')"><img name="a" src="a1.jpg" border=0 width=107 height=36></a>
</body>
</html>

Step 6 - Exercise :)

The aim of the following exercise is to test your understanding of the above information. Another button, identical in size to a1.jpg and a2.jpg, is to be added to this page. The image tag will be named 'b' and will consist of two images b1.jpg and b2.jpg. Replace the blue '?'s in the following code with the correct values:

<html>
<head>
<title>Your Document Title Goes Here</title>
<script language="javascript">

</script>
</head>
<body background="some_image.jpg" text="#000000" link="#ff0000" alink="#00ff00" vlink="#0000ff">
<a href="mouseover.html" onMouseOver="hiLite('a','a2','Your Comment Here')" onMouseOut="hiLite('a','a1','')"><img name="a" src="a1.jpg" border=0 width=107 height=36></a>
<a href="mouseover.html" onMouseOver="hiLite('b','b2','Your Comment Here')" onMouseOut="hiLite('?','?','')"><img name="?" src="?" border=0 width=107 height=36></a>
</body>
</html>

Click here to see what your final html should look like :)
Back To Javascript Section