CodeLair scripts and tutorials; click to return to home page

Image Rollovers

With Javascript, you can make images change when you move your mouse over them. This is very useful for image links and the like.
Last updated: June 03, 2007

No doubt you've seen this kind of thing. When you hover your mouse over an image, it changes colour, or the image changes completely. This is quite easy to do with Javascript, and this page will show you how.

 

The basic rollover

The first thing you need to do is create two images: one for when the mouse is not over it, and one for when the mouse is over it. Both images must be exactly the same dimensions, otherwise one will get squashed or stretched. I am going to use these two images of the sun:

The grey one is the "off" image and the yellow one is the "on" image. First insert the image into your document with the code:

<img name="sun" src="sun-off.gif" width="74" height="74" border="0">

Obviously change the name, width and height attributes to your image. Also note the name attribute specified here. This is very important: without it the script won't know which image to change. It doesn't matter exactly what the name is, but you should use something meaningful. Calling this image 'moon' would be silly.

Javascript is reliant on what are called "events". When something happens in your browser, an event is triggered. You can capture these events with event handlers. For the rollover script, we will use the onMouseOver and onMouseOut events. When our mouse rolls over the image, an onMouseOver event is triggered. When we move our mouse off the image, an onMouseOut event is triggered. Other events include onClick, onFocus (when the window is brought to the front), onBlur (when the current window is moved away from), onMouseDown (when the mouse button is pressed down) and onMouseUp (when the mouse button is released).

To activate our rollover, we change our previous code to look like this:

<img name="sun" src="sun-off.gif" width="74" height="74" onMouseOver="document.images.sun.src='sun-on.gif'" onMouseOut="document.images.sun.src='sun-off.gif'>

When one of the events is triggered, this code looks at the current document, at its images, then finds one called sun, then resets the src attribute. You should end up with something like this:

 

Preloading images

It is not noticeable with the previous image, but when you trigger a rollover, the change is not instant. This is because the image is not usually loaded into the browser until you move your mouse over it. So when the event occurs, you have to wait for a second or two for the image to load. Try this one:

You will notice that the image does not load straight away the first time you hover over it. The way to stop this happening is by preloading the images. In the head of your HTML document, put this code:

<SCRIPT LANGUAGE="JavaScript">
ball_off = new Image
ball_on = new Image
ball_off.src = "ball_off.jpg"
ball_on.src = "ball_on.jpg"
</SCRIPT>

And your rollover code will look like this:

<img name="ball" src="ball_off.jpg" width="143" height="143" onMouseOver="document.images.ball.src=ball_on.src" onMouseOut="document.images.ball.src=ball_off.src">

Note the removal of the single quotes in each of the event handlers. This is because we want to refer to a variable rather than an explicit address of the image. As before, change all the URLs and attributes to meet your needs. A demo is given below.

Preloading Demo

 

And, as Homer Simpson would say, "That's the end of that chapter!"