How are images swapped?

As you learned earlier, JavaScript animation replaces one image with another image. For this to happen you need a JavaScript event and a method for swapping the images.

Example of an event and image swap

The example to the left is known as a "roll-over".

Move your mouse over the image and see what happens.

How the rollover works (technical stuff)

The rollover example creates an instance of the Link object with standard HTML anchor tags, this link object is named "rollover". The hypermedia for this object is "danger.gif"

Another image source "dangera.gif" , is also loaded (cached) into memory is ready to replace the source image of "rollover" as soon as the correct "event" happens.


In this example, the "event" is either an "onMouseOver" or "onMouseOut" event. When the mouse is over the link object represented by the rollover image, it is replaced with the contents of the dangera.gif file. As soon as the mouse is removed from the link, the original image source is restored with the onMouseOut event.

Assuming that the browser compatibility issues and image caching have been addressed, the script below will perform the rollover affect you just saw.

It's easier to just look at the script

1.  <A HREF="#"
2.    onMouseOver="if(bAnimate) rollover.src='dangera.gif'; return true"
3.    onMouseOut ="if(bAnimate) rollover.src='danger.gif'; return true"
4.    >
5.  <IMG SRC="danger.gif" BORDER="0" WIDTH=150 HEIGHT=65 NAME="rollover">

Line 1 opens a Link object. The Link object generates the triggering events.

Lines 2 and 3 show the events and event handlers. The onMouseOver states that when the mouse is on the link (in this case an image) the source attribute for the Image object named "rollover" will be replaced with "dangera.gif". This will only happen if the browser is capable of displaying JavaScript animation. As we saw in the lesson on browser compatibility, the bAnimate variable will only be "TRUE" if the browser is capable of JavaScript animation.

On line 3, the onMouseOut ensures that the Image object, called "rollover", is restored to it's original source image when the mouse is moved away from the link.

Line 4 closes the Link object.

Line 5 creates the actual Image object the that is affected by the previous four lines of code. On this line the image's source, border, width, height, name, and align attributes are defined. Notice that the "name" attribute is also the name of this particular Image object (as used in lines 2 and 3 of the script).

JavaScript Events

Any event can be used to cause one image to be replaced by another image. JavaScript offers a variety of objects, each with its own events. Here is a table of the events that are widely supported by "JavaScript aware" browsers:
Object Event
Area onMouseOut onMouseOver      
Button onClick        
Checkbox onClick        
Form onReset onSubmit      
Frame onLoad onUnload      
Image onAbort onError onLoad    
Link onMouseOver onMouseOut These were used in the rollover.
Image onClick onError onLoad    
Radio onClick        
Reset onClick        
Select onChange        
Submit onClick        
Text onBlur onFocus onClick    
Textarea onBlur onChange onFocus    
Window onBlur onError onFocus onLoad onUnload
In addition, events can also be triggered by timers, as we'll see later.

[Previous Lesson]    [Tutorial Home Page]    [Next Lesson]