Today, I will teach you how to write JavaScript and HTML so that when visitors come to your site click on the image button, then the image button will change to a new image button. When the visitor clicks on the other image button, the original image button will reappear.
Here’s the code for creating an onclick image swap effect, just follow it step by step:
{
image1 = document.getElementById(’image1‘);
image2 = document.getElementById(’image2‘);
image3 = document.getElementById(’image3‘);
image4 = document.getElementById(’image4‘);
if ((image1.style.display) == ‘block‘)
{
image1.style.display = ‘none‘;
image2.style.display = ‘block‘;
image3.style.display = ‘block‘;
image4.style.display = ‘none‘;
}
}
function buttonB()
{
image1 = document.getElementById(’image1‘);
image2 = document.getElementById(’image2‘);
image3 = document.getElementById(’image3‘);
image4 = document.getElementById(’image4‘);
if ((image3.style.display) == ‘block‘)
{
image1.style.display = ‘block‘;
image2.style.display = ‘none‘;
image3.style.display = ‘none‘;
image4.style.display = ‘block‘;
}
}
function init()
{
document.getElementById(’image1‘).style.display = ‘block‘;
document.getElementById(’image2‘).style.display = ‘none‘;
document.getElementById(’image3‘).style.display = ‘block‘;
document.getElementById(’image4‘).style.display = ‘none‘;
}
</script>
<body onload = “init()”>
<table>
<tr>
<td id=“image1″><a href=“#” onClick=“buttonA();“><img src=“but1.jpg” border=“0″></a></td>
<td id=”image2″><a href=“#” onClick=”buttonA();”><img src=“but1b.jpg” border=“0″></a> </td>
<td id=“image3“><a href=“#” onClick=”buttonB();“><img src=“but2.jpg” border=“0″></a></td>
<td id=”image4″><a href=“#” onClick=“buttonB();“><img src=“but2b.jpg” border=“0″></a> </td>
</tr>
</table>
</body>
Click here to download sample file.