Greg Amer

Images

 hidden images

i-2
JavaScript:

image swaps can also be used with onMouseOver to change the properties of a totally different image. 

 

Hard Reload
To See Menu
Pass the mouse over this image.

This image link object uses onMouseOver & onMouseOut event handlers to manipulate the hidden image in the upper left margin.

Unfortunately, JavaScript does not allow images to be inserted into a document after it has loaded. Images that are swapped during runtime must address an existing document image object, through the natural document object image array. Hidden images are an artificial remedy to this problem.

<script language="JavaScript">
<!--

 Hidden images

imgdif = new Array(3)

imgdif[0] = new Image(96,70)
imgdif[0].src = "image/blank.jpg"
imgdif[1] = new Image(96,70)
imgdif[1].src = "image/wow.jpg"

 imgdif simply creates an array for the two swapping images. The hidden image/blank.jpg & its replacement image image/wow.jpg.The hidden image blank.jpg is a white square which matches the background color of the document.    

function swapIt(i) {
document.dif.src = imgdif[i].src }

// -->
</script>

 swapIt is the image swapping function. document.dif is equivalent to document.image[1].   

<a href onMouseOver="swapIt(1); return true;" onMouseOut="swapIt(0); return true;">
<img src="image/image1.gif" border="0" width="205" height="56">
</a>

<img src="image/blank.jpg" name="dif" width="96" height="70">

 The link object event handlers for image1.gif call on swapIt passing a value for i.



The document image object document.images[1] is given a name dif, for easy reference.   


Images that are swapped must also be the same size. Or the browser will force a fit to the document image object size. Cropping images of different size can help remedy this situation.

example Forced Fit example Cropped

H
I
N
T

 The properties of an image object cannot be changed. This includes the height, width, alt, lowsrc, name & border. The only modifiable property is src.


Both images call the same image for swap, image/image12.jpg, but the second example has cropped the Wow! image to prevent distortion. Of course the extra space occupied by the cropped image is a drawback.
[back]   [home]   [next]