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.

"danger.gif"

"dangera.gif"

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

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.