The example to the left is known as a "roll-over".
Move your mouse over the image and see what happens.
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.
|1. <A HREF="#"
2. onMouseOver="if(bAnimate) rollover.src='dangera.gif'; return true"
3. onMouseOut ="if(bAnimate) rollover.src='danger.gif'; return true"
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.
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).
|Link||onMouseOver||onMouseOut||These were used in the rollover.|
In addition, events can also be triggered by timers, as we'll see later.