The code toggles between two images in response to mouse clicks on the images or clicking a button. The document's image array is used to accessing the target image. The array allows lookup by name. An anchor/link is used to create a clickable image. The anchor would usually load a URL, but the code changes the action of the hyperlink. Also note, the button uses the same function call as clicking the image.
<a href="#" onClick="clickOnOff(imageName); return false;"> and the button <input type="button" value="Click Me" onclick="clickOnOff(imageName);">
Notice: the left image changes size slightly. This is fixed on the right by specifying image size in the image tag.
var powon = new Image();
powon.src = 'images/zap.gif';
var powoff = new Image();
powoff.src = 'images/pow.gif';
function clickOnOff(imageName) {
switch (document.images[imageName].src == powoff.src) {
case true:
document.images[imageName].src = powon.src;
break;
case false:
document.images[imageName].src = powoff.src;
break;
}
}