From time to time you may want to change the source of an image based on a user’s interaction with your web form.

Below is a simple way of achieving this result using jQuery:

To start with I’ve created an image tag.

<img src="/images/collapse.png" id="ExpandCollapseImage" alt="Expand or Collapse this panel" />

Now with the HTML ready I can hook up a jQuery click event to the image.

$(document).ready(function () {
// Hook up a function to my click event
$('#ExpandCollapseImage').click(expandCollapse);
});

function expandCollapse() {
// This is the line that this entire post is about (must learn to get to the point quicker)
// Here I'm changing the source of the image to expand.png
$('#ExpandCollapseImage').attr('src', '/images/expand.png');
}

There you go.  Enjoy.