HOW TO CHANGE/TOGGLE IMAGES ONCLICK
The following demo shows how to change or toggle images by using the onclick event on a link.
CLICK TO TEST
Put the following code in between the <head> and </head>tags:
<script type="text/javascript">
function changeIt()
{
var theImg = document.getElementsByTagName('img')[0].src;
var x = theImg.split("/");
var t = x.length-1;
var y = x[t];
if(y=='em1.gif')
{
document.images.example.src='em2.gif'
}
if(y=='em2.gif')
{
document.images.example.src='em1.gif'
}
}
</script>
Put the following code in the body section of your page:
<a href="#" onclick="changeIt()">test</a>
<img src='em1.gif' name='example' border='0' />
Notes:
1. The [0] of:
var theImg = document.getElementsByTagName('img')[0].src;
indicates the first image tag on the page. You need to change this if you have more images on your page that come before this image by counting the number to this one starting from 0 for the first.
2. If you do not want to toggle, then simply delete these lines:
if(y=='em2.gif')
{
document.images.example.src='em1.gif'
}
| 
Home
Computers & Internet
