Untitled

one method - one function


<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">
<img id="myImage2" onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage(image) {
    var wason = image.src.match("bulbon"); //if you don't want to preserve the previous functionality you can remove this
    document.getElementById('myImage').src = "pic_bulboff.gif";
    document.getElementById('myImage2').src = "pic_bulboff.gif";
    if (!wason) //preserving the previous functionality
      image.src = "pic_bulbon.gif";
}
</script>

</body>
</html>


----
other method - two functions


<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage(this)" src="pic_bulboff.gif" width="100" height="180">
<img id="myImage2" onclick="changeImage2(this)" src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage(image) {
    document.getElementById('myImage2').src = "pic_bulboff.gif";
    if (image.src.match("bulbon"))
        image.src = "pic_bulboff.gif";
    else
        image.src = "pic_bulbon.gif";

}

function changeImage2(image) {
    document.getElementById('myImage').src = "pic_bulboff.gif";
    if (image.src.match("bulbon"))
        image.src = "pic_bulboff.gif";
    else
        image.src = "pic_bulbon.gif";

}
</script>

</body>
</html>