Greg Amer

Images

 image swaps

i-1
JavaScript:
gascripts.com image objects occur naturally within the document object, when a document contains an image. Alternately, image objects can be artificially created by specifying it as a new Image.

 

Hard Reload
To See Menu

swapOn(i) is used to swap images
swapOn(i) is used to swap images

H
I
N
T

 These images seemingly change their appearance when the mouse passes over them. It's only sleight of hand the image is merely swapped, for another image.  
 

 

Preloading images into memory is the key to any image work. In a typical situation, when an image is called, the browser checks the server for the image. By preloading an image, the browser doesn't have to search the server for the image, because it's already loaded into clients memory. When an image is called, delivery is immediate.

Preloading an image is accomplished by creating a new Image object, assigning it to a variable name and defining two properties, size (x,y) &  source src. This can be done by creating multiple instances of new Image objects, or in an array of new Image objects.

example new Image object example array of new Image objects


name = new Image(x,y)
name.src = "imagename.gif"


name = new Array(n)
name[0] = new Image(x,y)
name[0].src = "imagename1.gif"
name[1] = new Image(x,y)
name[1].src = "imagename2.gif"

NOTE: JavaScript 1.0 does not support Image objects. This includes NN2 & IE3.

For efficiencies sake, the array is the way to go. By arranging images in an array, calling them becomes as simple as providing a number. It also cuts down on the number of variable names, you need to remember. In the next example, paired arrays of images are used to create a common toolbar effect. A third 'invisible' paired array is also used, the document objects own image array.

toolbar image swappingtoolbar image swappingtoolbar image swapping Toolbar

<script language="JavaScript1.1">
<!--

 image swapping

imgon = new Array(3);

imgon[0] = new Image(71,21);
imgon[0].src = "image/home2.gif"
imgon[1] = new Image(71,21);
imgon[1].src = "image/away2.gif"
imgon[2] = new Image(71,21);
imgon[2].src = "image/email2.gif"

imgon preloads the images to be viewed when the onMouseOver event handler calls the function swapOn.
Each element imgon[n] of the array is created as a new Image object with the size (71,21). The property src is defined for each object.   

imgoff = new Array(6)

imgoff[0] = new Image(71,21);
imgoff[0].src = "image/home1.gif"
imgoff[1] = new Image(71,21);
imgoff[1].src = "image/away1.gif"
imgoff[2] = new Image(71,21);
imgoff[2].src = "image/email1.gif"

imgoff preloads the images to be viewed when the onMouseOut event handler calls the function swapOff.
Each element imgoff[n] of the array is created as a new Image object with the size (71,21). The property src is defined for each object

var swapOn = new Function( "i","eval ('document.image'+ i).src = imgon[i].src; window.status = 'swapOn is engaged'; ")

 swapOn simply switches the image source of each 'image'+i with the paired imgon[i]. The eval function ensures a proper object is being addressed.

var swapOff = new Function( "i","eval ('document.image'+ i).src = imgoff[i].src; window.status = ''; ")


//--></script>

 swapOff switches the source of each image i, to the paired imgoff[i].    

N
O
T
E

The document object automatically creates an array document.images when images are loaded . These objects are sequentially numbered in load order. The first image becomes document.images[0], the second   document.images[1], etc. Navigator 3.xx recognizes these images as cached objects, but does not associate them with a document <img tag location.

<a href onMouseOver="swapOn(0); return true" onMouseOut="swapOff(0); return true">
<img src="image/home1.gif "alt="toolbar image swapping" border="0" width="71" height="23" name="image0"> </a>

<a href onMouseOver="swapOn(1); return true" onMouseOut="swapOff(1); return true">
<img src="image/away1.gif" alt="toolbar image swapping" border="0" width="71" height="23" name="image1"> </a>

<a href onMouseOver="swapOn(2); return true" onMouseOut="swapOff(2); return true">
<img src="image/email1.gif"
alt="toolbar image swapping" border="0" width="71" height="23" name="image2"> </a>

 

Each image in the toolbar is surrounded by a link object a href. The link object is assigned the task of handling the image event handlers onMouseOver & onMouseOver. The event handlers pass a value for i, to the appropriate function.

The 'invisible' document object image array looks like this: 

document.images[0].name = "image0"
document.images[0].src = "image/home1.gif"
document.images[1].name = "image1"
document.images[1].src = "image/away1.gif"
document.images[2].name = "image2"
document.images[0].src = "image/email1.gif"

Compare that with the two created arrays:

imgon[0].src = "image/home2.gif"
imgon[1].src = "image/away2.gif"
imgon[2].src = "image/email2.gif"
imgoff[0].src = "image/home1.gif"
imgoff[1].src = "image/away1.gif"
imgoff[2].src = "image/email1.gif"

 

<script language="JavaScript">
<!--
function swapOn() { }
function swapOff() { }
//--></script>

 To maintain backwards compatibility, precede the script above with a second script, but drop the 1.1 designation in the language definition. Provide dummy functions for swapOn & swapOff.
  [back]   [home]    [next]