Example of Image Source Replacement

Image Source Replacement

JavaScript gives you the ability to replace one image with another when a specific event occurs (such as moving the mouse over a link). This allows you to include a kind of psuedo-animation in your page.

The resources in the document are divided into the following sections:

A working example
The JavaScript source code
How to access the JavaScript with your document

Image Source Replacement Example

All of the main Blue Reef web pages include examples of Image Source Replacement. A separate example is also shown below below for your convenience. You can view the source of this document to get a better feel for how the JavaScript is called from within the Document Body.

You'll note that the JavaScript events, "OnMouseOver" and "onMouseOut", are also handled in this example.

The Source Code

The JavaScript source code for the Image Source Replacement is included below:

<script>
<!--

  // define and initialize image objects
  hp=vs=rp=ts=null;

  if (document.images) {
    // preload the alternate images offscreen
    imgarray = new Array(4);
    imgarray[0] = new Image();
    imgarray[0].src = "images/hpg.gif";
    imgarray[1] = new Image();
    imgarray[1].src = "images/vsg.gif";
    imgarray[2] = new Image();
    imgarray[2].src = "images/rpg.gif";
    imgarray[3] = new Image();
    imgarray[3].src = "images/tsg.gif";
  }

  function selectImage(img) {
    if (document.images) {
      var tmp = img.src;
      img.src = img.lowsrc;
      img.lowsrc = tmp;
    }
  }

//-->
</script>

To use this script you will need to include it in the HEAD portion of your document, i.e. between the HEAD tags - <HEAD> ... </HEAD>. The title tag <TITLE> is also located in the HEAD portion of your web documents.

The first part of the source code defines and initializes the image objects by name. These are the same names that you will include in your HTML source (see below). It is important that these are included or browsers that do not support the document.images object will report errors. The second part of the script preloads the alternate images or those images that you will specify as the "lowsrc" (see below). The third part of the script is the selectImage function which simply swaps the image lowsrc attribute for the image src attribute. A very simple concept that works quite well.

Document Usage

The generic HTML code needed to utilize the Image Source Replacement JavaScript Source Code is included below:

  <a onMouseOver="selectImage(IMGNAME);
                  status='MESSAGE'; return true"
     onMouseOut="selectImage(IMGNAME); status=''; return true"
     href="URL"><img
     alt="MESSAGE"
     border=0 width=WIDTH height=HEIGHT name="IMGNAME"
     lowsrc="LOWSRC" src="SRC"></a>

You will need to substitute appropriate content for the MESSAGE, URL, WIDTH, HEIGHT, IMGNAME, LOWSRC, and SRC tags.