Image Rollovers
Published: 5 April 2005 • Updated: 3 June 2007 • Tags: javascript
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. With Javascript, you can make images change when you move your mouse over them. This is very useful for image links and the like. This tutorial will show you how.
The images #
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" alt="Sun">Change the src (filename), width, height and alt attributes to match 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.
Same goes for the alt attribute - it should contain a short description of the image, for accessibility reasons.
The basic rollover #
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, onKeyDown (when a key on the keyboard is pressed down), onKeyUp, onMouseDown (when the mouse button is pressed down) and onMouseUp.
To activate our rollover, we change our previous code to look like this:
<img name="sun" src="sun-off.gif" width="74" height="74" border="0" alt="Sun"
onMouseOver="document.images.sun.src='sun-on.gif'"
onMouseOut="document.images.sun.src='sun-off.gif'">Note the document.images.sun.src parts. When one of the events is triggered, this code looks at the current document, at its images, then finds one called sun - which is the name we gave it earlier. Then it changes 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 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:
If you are on a slower connection, you’ll 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">
var ball_off = new Image
ball_off.src = "ball_off.jpg"
var ball_on = new Image
ball_on.src = "ball_on.jpg"
</script>And your rollover code will look like this:
<img name="sun" src="sun-off.gif" width="74" height="74" border="0" alt="Sun"
onMouseOver="document.images.sun.src=ball_on.src"
onMouseOut="document.images.sun.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.
And, as Homer Simpson would say, “That’s the end of that chapter!”