Write to UsSwap Images with Javascript
Almost everyone has visited webpages where an image changes when you move the mouse over it or click on it without the page having to reload. This is a common effect and can be easily achieved with Javascript. Any browser can show this Image Swap effect, unless you are using an old browser like IE 3.0, which is very unlikely these days.
I was watching Casino Royale with Daniel Craig when I decided to write this tutorial, and that inspired me to use pictures of James Bond to teach you how to swap images. Not only will you learn some Javascript, you will also learn how much James Bond has changed his looks through the years.
Let's start with something basic. Web designers often use Javascript to change images on a mouseover. A simple example of this is shown below. Just click on the picture of Daniel Craig, and you will see how the image changes to that of Timothy Dalton.
This is a simple way of swapping images, and it can be done with only one line: <a href="#" onMouseOver="document.another_bond.src='dalton.jpg';"><img name="another_bond" src="daniel_craig.jpg" width="250"></a>. All you need is enclosing the picture inside the <a href> </a> tags and giving the picture a name. I chose another_bond. If you want access to the picture file, you need to use this name.
In order to activate this simple script, you need onMouseOver. You want to change the picture of Daniel Craig to that of Timothy Dalton, so onMouseOver = “document.another_bond.src ='dalton.jpg';” is exactly what you need. Notice the name of the picture (another_bond) between document. and .src. The script is telling the browser to find the name called another_bond and change it to dalton.jpg. It is important that you remember that when a statement is inside double-quotes “”, whatever is inside that stament that needs quotes, like the name of the picture file 'dalton.jpg', will use single quotes. Refraining from doing this will produce an error in your script.
Image swapping can produce unwanted results when the image you want to change has been given a width and height. If the new image has different dimensions from the original, you could end up looking at a distorted image. If you are thinking of swapping images in your page, try to find images that have similar dimensions.
It is easy to notice that once your mouse-cursor is over the picture, it changes, but there's nothing you can do to reverse that change. That's because you need onMouseOut. If you write this: onMouseOut = "document.another_bond.src ='daniel_craig.jpg';" inside the <a href> tag, the image will also change once the mouse cursor is no longer over the picture.
There is a more efficient way of doing this, and it requires the following script:
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
if(document.images) {
Bond_pics = new Array();
Bond_pics[1] = new Image();
Bond_pics[1].src = "sean_connery.jpg";
Bond_pics[2] = new Image();
Bond_pics[2].src = "pierce_brosnan.jpg";
}
function swapping_pics(picture_name, value_2) {
document.images[picture_name].src = Bond_pics[value_2].src;
}
</SCRIPT>
In order to change one image to another, you need two images, and if you want this change to be fast, the images must be downloaded before the page loads. In the above script, Bond_pics is an array, and this array is the heart of a pre-loading routine. Inside that array, there'll be a picture of Sean Connery and a picture of Pierce Brosnan. Any browser will store these images in their caches and associate them with the Bond_pics array. Once the images are cached, the browser won't have to load them during a MouseOver or MouseOut event, delaying the transition between one image and the next. The first part of this array is Bond_Pics[1]. Using new Image(), we make Bond_Pics[1] a member of the Image Class. With Bond_pics[1].src = “sean_connery.jpg”, we specify what the image is by employing the src property and providing the path to the picture. The same thing is done with Bond_Pics[2].
This script uses a function called swapping_pics. Notice that this function gets two values: picture_name and value_2. The variable picture_name will receive the name of the picture you want changed, and value_2 will carry the file-name of the second picture.
This function won't work unless it is called, and you can invoke it from an image-link like it was done with the previous picture.
<a onMouseOver="swapping_pics('img1',1)" onMouseOut="swapping_pics('img1',2)" href="javascript:void">
<img name="img1" border=”0” src="pierce_brosnan.jpg" alt="James Bond pictures" width="250"></a>
Here we have onMouseOver and onMouseOut calling the function swapping_pics. The name given to the main picture is img1, and that's the name picture_name will receive. As for value_2, its value can be either 1 or 2. The picture of Sean Connery has a value of 1, and the picture of Pierce Brosnan has a value of 2.
How will the script works? Just move the mouse over the picture below.
So far so good, but what about a script that allow you to choose the name of any James Bond actor from a list, and a picture of that actor will appear right away? It can be done, but you need to make a few changes. Paste the following script inside the <head>..</head> tags:
// ************************* pre-cache five actor pictures
image1 = new Image()
image1.src = "dalton.jpg"
image2 = new Image()
image2.src = "roger_moore.jpg"
image3 = new Image()
image3.src = "sean_connery.jpg"
image4 = new Image()
image4.src = "daniel_craig.jpg"
image5 = new Image()
image5.src = "pierce_brosnan.jpg"
function Bond_pictures(list) {
/*List is an object and not a variable. The code below turns
it into a variable.*/
var img = list.options[list.selectedIndex].value;
//list.selectedIndex can go from 1 to 5.
document.bond_frame.src = eval(img + ".src");
}
</script>
The script is no different from the one we saw before. However the function is now dealing with a list object that can have five different values. All you need is to put this between the <body> tags:
<BODY>
<H2>Image Object</H2><IMG src="roger_moore.jpg" width=240
name=bond_frame>
<FORM><SELECT onchange=Bond_pictures(this) name=cached>
<OPTION value=image1>Timothy Dalton
<OPTION value=image2 selected>Roger Moore
<OPTION value=image3>Sean Connery
<OPTION value=image4>Daniel Craig
<OPTION value=image5>Pierce Brosnan
</OPTION>
</SELECT>
</FORM>
</BODY>
You want to know if it works? Select a picture from the list below:
A more advanced version of a Swap Image script is the Slide Show. You will learn how to make a Slide Show in the next tutorial. Combined with this one, you will get a good idea of how to manipulate images using Javascript.