Almost everyone with an interest in JavaScript is also eager to learn how to manipulate images. Images can either greatly enhance the look of a website, or if overdone, can shoo users away. It's human nature to want to show off what you know, but this often backfires if you show off too much. When designing a website it is always the best practice to do things in moderation. Some things may be cool the first time you see them, but after that they quickly become old news. That said, we'll get on with our study of images.

Pre-Loading

One way to enhance a site is to have certain images preload; notice that I said 'certain'. If you have several fairly large images that are randomly loaded on your main page as I do, preloading is not a good idea; people would watch their blank screen for maybe a minute while all the images were loading, and then surf away to another site without seeing any of them. In this case, it's better to just load the image in the normal way... at least there's something else for the user to look at while the pic loads.

But for rollovers (MouseOvers) it is almost essential to have your images preload in order to have the full effect. Here's a preload routine that will load two images into client memory:

image1 = new Image(22,10);
image1.src = "blue.gif";

image2 = new Image(22,10);
image2.src = "red.gif";

The first line declares a new image object, named image1, by using the new keyword; the second line tells the browser where to find the source of image1 (it's URL) and to load this source into memory. Lines 3 and 4 repeat this proces for the second image. Here's a tip: notice the numbers 22,10 in the parentheses? These are the width and height of the images repectively. Most script writers leave this out, probably because of laziness. But entering the dimensions of an image does a lot to speed up the loading of a page; if you omit them, the browser has to run extra computations to figure out the size for you.

At this point, the images will not be seen on the page, because although they are loaded into the client's memory, we have made no provision yet for showing them on the screen;

Rollovers Using a Function

Rollovers are most commonly used for links with images that dynamically change when you put your mouse pointer over them. There are several ways to accomplish this task and for this example we'll use functions which will be called by the onMouseover and onMouseOut event handlers.

We can add a couple of functions to the image preload script like this:

<script language="Javascript">
<!--hide
image1 = new Image(22,10);
image1.src = "blue.gif";

image2 = new Image(22,10);
image2.src = "red.gif";

function red(){
    document.mypic.src = "red.gif"}

function blue(){
    document.mypic.src = "blue.gif"}

function red2(){
    document.mypic2.src = "red.gif"}

function blue2(){
    document.mypic2.src = "blue.gif"}
//-->
</script>

At this point you may be wondering why the assigned names image1 in the preload section and mypic in the functions are not the same. The reason for this is that the names in the preload section and the names in the functions really have no relation to each other except as they refer to the source. If we used 'image1' in place of 'mypic' in the functions we could run into errors. In the preload section 'image1' is created as an object solely for the purpose of loading the image into memory.

After the image is in memory we can assign to the same image as many different names as we need to, in order to identify the different funtions. For each rollover link we must have a corresponding separate function and image name to identify it. Here is how you write the code for a couple of matching links.

<a href="#"
onMouseOver="red()" onMouseOut="blue()">
<img src="blue.gif" name="mypic" border=0>
Link 1</a>


<a href="#"
onMouseOver="red2()" onMouseOut="blue2()">
<img src="blue.gif" name="mypic2" border=0>
Link 2</a>

First, the # character is a dummy url- this can be handy when testing a script or when you don't want the user to be whisked off to someplace else in the middle of a tutorial example. Clicking on such a link does nothing.

No beginning or ending <Script> tags are needed here because the onMouseOver and onMouseOut event handlers are 'built in' to the HTML link tag. To break this down, line 3 of the first link is actually the first part to be carried out and it shows the blue arrow in the browser window. The word mypic is used as a reference to the first function, and at the same time is associated with the source 'blue.gif' in this line.

Line 2 comes into play when the mouse is passed over the link and the onMouseOver handler causes the function red() to be called into action to show the red arrow. And of course when the mouse pointer leaves the link the onMouseOut handler triggers the function blue() to put the blue arrow back on the screen.

For the second link we had to have a separate function and a separate name even though they use the same preloaded images. If you wanted to add more links, you must also add a function to match each link, and with corresponding names like 'red3' and 'mypic3' and so on. Of course the preload and functions script goes into the Head section of your document, and the links go wherever you want them in the Body.

Pass your cursor over the links to see the effect, but don't click on them; you won't go anywhere but it will deactivate the link and cripple the rollover effect until the page is refreshed.

Link 1

Link 2

Animated Links

You may have seen image links that seem to depress, or animate, when you click on them. This type of image link can be tasteful and a little unique. The following example uses simple onMouseDown and onMouseUp event handlers. This time we won't use functions, but if you wanted to use them, you could just follow the method for rollovers; all these event handlers are pretty interchangeable either way. Here's the code: (Pay particular attention to where both red image brackets are located- a common error is to omit the end bracket.)

<a href="#example"
onMouseDown="document.images['example'].src= img4.src"
onMouseUp="document.images['example'].src= img3.src">
<img src="/images/clickup.gif" name="example" border=1>
</a>

And here's the output:

Of course the images were preloaded; you can see from the code above that even though it's a little different from the rollover code, it's basically the same process. We used 'example' for our name here, instead of 'mypic'; you can choose just about any name you want to, as long as it's not a keyword. And you could even change 'onMouseDown' and 'onMouseUp' for 'onMouseOver' and 'onMouseOut' if you wanted to and it would work fine; try it.

The code itself is simply saying in JavaScript-ese, "On Mouse Down show the source of img4, and on Mouse Up show img3 again". And if you want to download the image used in the examples, here they are. Grab 'em.