There are 5 no. of buttons(images).
Initially all are off image. Only 1 may be on at a time.
So when i press any button that img's src changes to on.png. Then when I press any of those on or off buttons, the pressed button source img changes to on.png and all other on img also change to off.png.

The html code is,

    <table cellspacing=0 style=padding:0%; margin:0% auto;>

<tr><td><img id=img1 src=off.png height=30 width=30 onclick=off(this.id); /></td><td>45:78</td></tr>

<tr><td><img id=img2 src=off.png height=30 width=30 onclick=off(this.id); /></td><td>45:78</td></tr>

<tr><td><img id=img3 src=off.png height=30 width=30 onclick=off(this.id); /></td><td>45:78</td></tr>

<tr><td><img id=img4 src=off.png height=30 width=30 onclick=off(this.id); /></td><td>45:78</td></tr>

<tr><td><img id=img5 src=off.png height=30 width=30 onclick=off(this.id); /></td><td>45:78</td></tr>

</table>

The javascript code is,

    function off(a)

{

    var images = document.getElementsByTagName('img');

    for(var i = 0; i < images.length; i++)

    {

        var img = images[i];

        alert(img.src);

        if(img.src == 'on.png')

        {

            img.src = 'off.png';

        }

    }

    document.getElementById(a).src='on.png';

}

The if() condition is not working, Please provide solution and explain why its not

working.
Thank you!