Question

Here I use two images. when i click once on the Sort_down.png image then it changes to Sort_up.png.
When I click on this image again it is not changing back to Sort_down.png, how can I achieve this ?

 <script type="text/javascript">
function clkimg() {
        var img = document.getElementById('stCodeDSC');
                img.src = '../Images/sort_up.png';

        }
  </script>


    <td width="11%" bgcolor="#C5DEFF" class="menu_header">
    <div align="center" onclick="clkimg();" > 
    <img name="stCodeDSC"  class="img" src="../Images/Sort_down.png"  id="stCodeDSC">
  </div>
 </td>

Answer 1

You aren’t telling it to sort down. In your click code you’ll need to test if the image is showing up or down and change it accordingly. Something like:

if(img.src === '../Images/sort_up.png')
    img.src = '../Images/sort_down.png';
else
    img.src = '../Images/sort_up.png';

Generally, however, this would be better handled by adding or removing a class on click and styling the class using css.