JavaScript Example: Image Rollover

This JavaScript demonstrates that img tags are just a array in DOM, and can be referred to by index. (View Source to see how its done.).

click me to change image. (refresh browser to revert)

Here's how one'd implement image change on mouse over. Move the mouse over the heart and it changes. This time, the tag is given a ID. Putting a ID to tags makes them much easier to refer to.

Note that the object with image roll-over needs not be a link. Though, one can do it on a link, or wrap a link around the image if so desired.

Here's how to change the style with onmouseover.

Move mouse over me, and i become red hot. Leave me, i get the blues.

Reference:

• http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onmouseover.asp
• http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/src_2.asp

Related essays:

• ImageMagick Tutorial by Example

Page created: 2005-06.
© 2005 by Xah Lee.