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; } }