Javascript Image Object

Check The Browser First!

Before we begin, please note that our examples only work with Netscape 3 and compatible browsers, so Internet Explorer 3 users are out of luck. This also means that we'll have to put in the appropriate browser checking code. The function that handles this check is called check_browser() and the source is:

// this function checks that the browser is capable of displaying
// the button animation. Only compatible versions of netscape 3 or
// higher browsers can support it the function returns true if it's
// the correct version, and false otherwise.
function check_browser()
{
// check to see it's netscape compatible
if (navigator.userAgent.indexOf("Mozilla") == -1) {
return false;
}

// get the major version number
var version_number = navigator.userAgent.charAt(8);

// check that major version number is greater than 3
if (version_number < 3) {
return false;
}

return true;
}

As you see, the check is pretty straightforward. It returns true if it's an acceptable browser version, and false if not. As there are still some differences between Netscape Navigator and Microsoft Internet Explorer in terms of Javascript implementation, you should use this code (or a modified version of it) to make sure that your Javascript runs on both browsers.

Okay, now that we know that we have the right browser, let's look more closely at the Image object. By adding the NAME parameter to any <IMG> tag, you will be able to access the image and change its parameters. The most common way is to change the .src parameter of the image object. The browser will display whatever image is specified by the .src parameter, so we'll explore some of the possibilities.

Simple Uses

One practical use of the Image object is to make a button appear highlighted when the mouse cursor is moved over the button like this: The code is very simple and is embedded inside the <A HREF> tag:

<A HREF="" OnMouseOver="test1.src='highlighted-button.gif'" OnMouseOut="test1.src='regular-button.gif'">
<IMG SRC="regular-button.gif" WIDTH=25 HEIGHT=25 BORDER=0 NAME="test1">
</A>

Simply by changing the .src parameter whenever either an OnMouseOver or OnMouseOut event occurs the image will change accordingly. Also notice that we gave the image a name called test1. Only after you give the image a name will you be able to manipulate it.

Javanimation

We can also create animations that function like GIF89 images. By using Javascript to create the animations it gives you greater control over how you want the animation displayed. Some people find the simple looping animations to become annoying after awhile, so you could limit the animation to be triggered on demand. For example, we'll take the red button and give it 3 different animations like so:

1. When user moves the cursor over the graphic (an OnMouseOver event), a red button appears.
2. On an OnMouseOut event the red button disappears again.
3. After the user clicks on the button, it triggers the OnClick event and the red button lights up before performing an action.

Try out the animation with the button you see on the left. For this example we create an Image array populated with each frame of the animation. Then we cycle through the array to get the animated effect. Go ahead and download the source to this animation.

Banners sans CGI

We also add a little more functionality to it, thus if the user moves the cursor over the image, it won't be rotated until the cursor moves away. And if the user clicks on the image, the browser goes to the URL that is associated with the image. Below you'll find a sample banner ad, and check out the source code too.

This is just a simple demonstration of the variety of ways to take advantage of the Image object. Try experimenting with the simple examples first, and once you're comfortable with it then you'll be able to see the wide range of possibilities available to you. I am also collecting links that demonstrate cool ways of using Image. If you come across one that is interesting or you've made one that you think kicks serious booties, send me an email and I'll include it on this page.

For more information check out these sites:

• Animated button source code
• Rotating banners source code
• Blurring menus, the most wicked use of Javascript I've seen. You must check this out.
• Cut-N-Paste Javascript. A good resource for useable scripts.
• Gamelan's Javascript Site. Another good Javascript resource to check out.