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.

[code language=”html”]
<img src="/images/collapse.png" id="ExpandCollapseImage" alt="Expand or Collapse this panel" />
[/code]

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

[code language=”javascript”]
$(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’);
}
[/code]

There you go.  Enjoy.