Adjusting Images Using Link onClick Events

 

Introduction.  Now we will work a little more with the onClick event for links to make some adjustments to images.  First, you need to copy the following images into an images subfolders and upload them to an images subfolder on your web.

 

Name Image
Tank.gif
Tanked.gif
Circle.gif
Square.gif

 

Swapping Images.  Our first program will create a page with an image and a link.  When the user clicks on the link the image will change.  The file should be called OnClickImageSwap.html.

 

<html>
<head>
<title>onClick Image Swap</title>

</head>

<body>
<P><center>
<img src="images/Tank.gif" name="MyImage">
<br>

<a href="#"

onClick="window.document.MyImage.src='images/Tanked.gif';
return false;">Make My Day!</a>

<br>
</center>
</P>
</body>
</html>

 

The image that appears initially on the screen will be the Tank.gif and we have given it the name MyImage.  On using the click event the image will change to the Tanked.gif.

After uploading and requesting the page the image should look like the following.

 

 

After clicking the link you should see something like the following.

 

 

We are building towards doing rollovers while demonstrating some other events.

Choose You Image Swap.  Now we will expand on this somewhat by giving the user the option to select between two different images to change.  The code should be put in a file called OnClickChooseImageSwap.html.  The code is in the following table.

<html>
<head>
<title>onClick Image Swap</title>
</head>

<body>
<P><center>
<table>
<tr>
<td align=center>
<img src="images/Tank.gif" name="MyImage">
<br>
<a href="#"

onClick="window.document.MyImage.src='images/Tanked.gif';
return false;">Make My Day!</a>

</td>
<td align=center>
<img src="images/Circle.gif" name="AnotherImage">
<br>
<a href="#"

onClick="window.document.AnotherImage.src='images/Square.gif';
return false;">Square the Circle</a>

</td>
</tr>
</table>
</center>
</P>
</body>
</html>

 

There is nothing particularly tricky in this code.  We place the images within a table and still associate the swap with the onClick event for a particular link.

After uploading and accessing this page you should see the following image.

 

 

Now you can select either or both of the links for clicking.