Click here to return to Newclient Main Help Page


Back


Last Updated: December 13, 1997

Image Source Replacement

Sometimes you may stumble across the need for a "pop-up" window. Perhaps it is used to display some help information, perhaps to display an address or contact information, or to display an image of an employee or a map displaying directions to a certain business location. Whatever the need, a Pop-Up Window can be easily created by calling a JavaScript function when the user clicks on a hypertext link.

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

  1. A working example
  2. The JavaScript source code
  3. How to access the JavaScript with your document

Image Source Replacement Example

An 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.

Visit the BWSD Home PageCheck out our Virtual Server ProductsThe BWSD Reseller ProgramOur Technical Support Pages

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.



top


bd