Image change, in a function onClick? Possibly using jQuery?

Question

I have a working button for changing the style of text in a text area. The button makes the text bold and unbold on second click and this works efficiently.

However what I want is for the image to change, each time that the button is pressed so that it is indicated that the text has had that formatting applied.

The HTML for the button is as follows

<a href="#" class="ButtonStyling" type="button" onclick="boldTextArea()" value="Bold"}><img alt='Bold Button' src='BButton.gif'></a>

I would be interested in any responses using Javascript or JQuery.

Answer 1

Without seeing your HTML, I have to guess how your image is displayed.

If it is an image, change the source via src.

var image = document.getElementById("yourImage");
image.src = "newImage.png";

If it is a background image, change the style

image.style.backgroundImage = "url(newImage.png)";