Client-Side Scripting with JavaScript

Part 11 - Images

The image object is part of the document object. Image has some properties (such as border, height, and width) which can be viewed but not set. The src property, however, can be set, allowing you to change an image displayed at that location in the document.

   document.images[number].src=filename

   document.images[name].src=filename
Here's an example:

Cat Change to dog, snake, duck, or cat.

<IMG SRC="cat.gif" NAME="pic1"> <SCRIPT LANGUAGE="JavaScript"> function ChangePic(newsrc) {document.images['pic1'].src=newsrc} </SCRIPT> <A HREF="javascript:ChangePic('dog.gif')">dog</A>, <A HREF="javascript:ChangePic('snake.gif')">snake</A>,

Changing the source of an image does not change the size or the placement on the page.

Example of a responsive menu:

Student Services
Faculty Services
Class Schedules
Calendars
About the Office

This uses the onMouseOver event to change the image displayed and also change the display on the status line.

Next Next: Some Final JavaScript Tidbits