Mouseover Images

One of the most popular "wow" items that's popping up all over the World Wide Web is the mouseover. In its simplest form, the mouseover is some part of a Web page that causes a change in the page display when the user's mouse passes over it. More and more creative uses for mouseovers show up all the time, from providing visual cues to the meanings of links on a page, to adding full, fly-out, cascading menu systems in DHTML (see my popup menu script for a good example of this).

Mouseovers first became technically possible with the release of Netscape Navigator 2.0, which included a new scripting language called JavaScript. The idea was to allow the Web to transcend for the first time the basic functionality of HTML. With JavaScript, Web developers were able to do more than just jump to a new location when a user clicked on a hypertext link -- they could actually modify the contents of the currently-loaded page. When Microsoft released their own Web browser, Microsoft Internet Explorer 3.0, they included their own variation on the theme -- JScript. Recently Microsoft and Netscape have agreed to settle on a vendor-neutral standard, which is being developed by the European Computer Manufacturers Association under the name ECMAscript.

As standards in this area converge, the use of scripting on the Web is becoming more feasible. The swell in popularity of the script-powered mouseover (as opposed to the comparatively slow and clunky Java implementations that were popular for a brief time) is a testament to the usefulness of JavaScript and its kin.

The Image Object

Strictly speaking, you don't need to know any JavaScript to understand this article, as everything is explained from the ground up. However, if you haven't had much programming experience and don't know any JavaScript at all, you might want to read SitePoint's JavaScript 101 if it really starts to look to you like I'm writing in Greek.

In most respects, JavaScript is an object-oriented language, which means that in the world of JavaScript, everything is an object. A browser window is an object (referred to as the window), a Web page is an object (the document) and the images in the Web page are objects in their own right. The nice thing about objects is that they have properties that you can change.

If you are familiar with the basics of HTML (check out our HTML Tutorial if you're not), you'll be used to the concept that you can create an image object on a Web page using the <IMG> tag:

<IMG SRC="imagefile.gif" WIDTH="75" HEIGHT="40">

Now, without knowing it, when you type this, you automatically create a JavaScript image object, which will allow you to change its properties later on if you like. This is exactly what we want to do to create a mouseover. When the mouse moves over the image we want to change what the image looks like, and what the image looks like is a property of the image object.

To simplify referring to this particular image object later on, we can assign it a name. This is pretty easy to do, and just requires us adding the NAME attribute to our <IMG> tag.

<IMG SRC="imagefile.gif" NAME="myimage" WIDTH="75" HEIGHT="40">

Now our image object is named "myimage", and can be referred to as such. At this point, it's worth pointing out that JavaScript is largely case sensitive. In other words, our image named "myimage" cannot be referred to as "MYIMAGE" or "MyImage".

I've said that objects in JavaScript have properties that we can change. We can set a property of our "myimage" object with the following general JavaScript statement:

document.images["myimage"].property = newvalue;

Where property is the name of the property you want to change, and newvalue is the new value you are assigning it. This line can be read:

By now I'm sure you're itching to know how to apply this to the humble mouseover. Well in a mouseover, we change the image displayed by the image object. Just as in HTML, where we use the SRC attribute of the <IMG> tag to indicate the URL of the image file we want to display, in JavaScript we set the src property of the image object to the URL of the image file we want it to display.

Using the general JavaScript statement I showed you above, this is written simply:

document.images["myimage"].src = "newimage.gif";