Beginner's Guide to
JavaScript
The OnMouseOver Event

Richie Lai
These are your greatests friends
when it comes to dynamic content. They allow pages to 'react' when a
user runs a mouse over and off an object. Primarily used for 'image
switching', these two event handlers can do everything.
First, let's look at where these go. For the most part, any
object can contain these two event handlers. Here, let's do the
dreaded onMouseOver
image
switching.
To start, we need to do a little planning. We need a function to
do our image switching, yet we don't want to write a function for
every switch we want to do. From experience, the easiest way we've
found to do this is to pass in paramaters that will cover the name,
file, and object of what we are trying to switch. Let's take a look
at an example page.
<HTML>
<HEAD>
<SCRIPT
LANGUAGE="JavaScript">
var KeepVar;
function ChangePicture(Name)
{
KeepVar = Name;
SwitchImg
= Name + "_on.gif";
document.images[Name].src=SwitchImg;
}
function Fix()
{
SwitchImg = KeepVar +
"_off.gif";
document.images[KeepVar].src=SwitchImg;
}
</SCRIPT>
<A HREF="." onMouseOver="ChangePicture('one')"
onMouseOut="Fix()"<>IMG SRC="one_off.gif" NAME="one"
BORDER=0></A>
<A HREF="." onMouseOver="ChangePicture('two')"
onMouseOut="Fix()"><IMG SRC="two_off.gif" NAME="two"
BORDER=0></A>
</BODY>
</HTML>
Basically, we use two functions here. The first is ChangePicture()
, which takes one
parameter. The key of this is that the image name has to be this
string, along with the file name. Once we get this parameter, we
append _on.gif
, which is what we
have named our file (It could be anything.), and then we make document.images[Name].src
equal to our
new image file! Note that 'Name' is used to reference the images[]
array. This function allows you
to do as many script changes as you want without having to write one
for each image. In addition, if you want to change the naming, you
can just add another parameter and append it to the other in the
array.
For example, if you wanted to pass in two parameters, you could
just declare ChangePicture()
like:
function
ChangePicture(Name,ImageName)
From there, you'd use
ImageName
to index your images[]
array. The next thing you'll
notice is the Fix()
function.
Basically, this returns the image to its original state once you
move your mouse off the image. This is exactly the same as the first
function with one subtle difference: you don't have to pass in a
parameter. (A global variable can be accessed by any script on the
page and you declare it outside of any functions and just inside
your <SCRIPT>
tag.)
Once you have the script written, the rest is just plain old
HTML. The OnMouseOver
and OnMouseOut
go into your anchor tag and
you just have to give your images names.
Next: Summary »
Skip
Ahead

1 Introduction
and the Basics
2 General
Information
3 Our First
Script
4 Forms
Manipulation
5 Frames
Manipulation
6 The
OnMouseOver Event
7 Summary