ShaerPoint 2013: How do I change the picture (source) for an image at runtime?

An image can easily be converted into a 'clickable' image with some simple html manipulation - put the image in an anchor tag.

I have added two images (First.ico and Second.ico) to the Style Library/images of my site collection. I also have jQuery referenced in my masterpage.

Here is the html:

<a href="" onclick="changeImage()"><img id="favourite" ></img></a>

Changing the image is just as easy:

First, lets set an initial source value:

jQuery(window).load(function () {
   $("#favourite").attr("src", "/Style%20Library/Images/First.ico");
})

Then, implement the changeImage function to switch images:

function changeImage() {
if ($("#favourite").attr("src") == "/Style%20Library/Images/First.ico")
{
$("#favourite").attr("src", "/Style%20Library/Images/Second.ico");
}
else
{
$("#favourite").attr("src", "/Style%20Library/Images/First.ico");
}
}