Javascript Tips / Javascript Image Swap example
To see how this image swap is done, select View, Page Source in Netscape Navigator or View, Source in Internet Explorer, or just scroll down farther in this page to see the code. You can also use this simple script if you want to create a button which can be pressed and held down.
The basic elements of the script you will find in the head of this document are the declaration of an image array to hold the two images used in the swap, a function which shows the second image, and a function which resets the image to the first one.
When you put your mouse over the image, the dropdown function is called by the onMouseOver call in the anchor reference tag located in the body of the document. When you move your mouse away from the image, the onMouseOut call in the anchor reference tag calls the dropup function which puts the original image back.
The original image is loaded with the image tag located inside the anchor reference, and must be named so the script can refer to it. In this case I have named it "pict".
Loading the images into the array causes them to be pre-loaded as the page loads, so when the user puts their mouse over the image for the first time there is no delay waiting for the image to load.
Here is the listing of this file without the text you're reading:
<HTML><HEAD><TITLE>Image Swap Test</TITLE>
<script>
pics = new Array()
'pre-load the
images so they are ready to use when the user moves the mouse over the
image
pics[0] = new Image()
pics[0].src = "projopts.gif"
pics[1] = new Image()
pics[1].src =
"optionsd.gif"
'change the
two image names above, and the ones in the body below, which are in orange type, to
load the images you want to use for your image
swap. For tips on getting the swap to look nice, jump here.
'load the original image into the image pict
function
dropup(){
setTimeout("document.pict.src=pics[0].src",500);
document.pict.src=pics[0].src
}
'load the
dropped down picture into pict
function dropdown(){
setTimeout("document.pict.src=pics[1].src",500);
document.pict.scr = pics[1].src;
}
</script>
</HEAD>
<BODY>
'change the file
referenced in the anchor tag to the one you want to load
<a href="dummy.htm" onMouseOver="dropdown();" return true
onMouseOut="dropup();" return true
><img src="projopts.gif" border=0
width="418" height="356" name="pict"></a
>
'breaking the anchor tags just before the > keeps extra space
out from between adjacent images. There is only one image referenced here, but I
like to keep the code formatting consistent.
</BODY></HTML>
This script has been tested in Netscape 4.51 and Internet Explorer 4.0, and in Firefox 3, and Firefox/3.0.18 under Ubuntu Linux's Hardy Heron.
Smoothing the look of the image swap
For this to look smooth the screen captures of the images to be swapped must be the same size in width and height. It was difficult to get the second screen shot cropped exactly the same as the first.
If they aren't cropped exactly the same, then the second image will appear to "jump" a little in one direction or the other depending on where the two images differ.
To solve this, make a copy of the first image, then copy and paste the changed elements from the second screen capture to this newly copied image. Then use this third created image in place of the second screen capture in your image swap.
If your second image was a shade darker or lighter than the first it is noticeable when the swap occurs also, so if you don't want that to happen the copy method described above fixes that problem as well. You could of course intentionally darken or tint the second image for yet another effect for your pages.
If you're unfamiliar with capturing screen elements like dialog boxes to use for web pages or for whatever other purpose then see Screen Capture Trick in the Windows Tips section of this site.