Now add an explanatory comment, and also comment out the existing button, by putting <!-- before it and --> after it. You should see something like this:
<!-- MDH_Custom: Commented out the existing button to use an image instead.-->
<!-- <button id="CheckButton2" class="FuncButton" onmouseover="FuncBtnOver(this)" onfocus="FuncBtnOver(this)" onmouseout="FuncBtnOut(this)" onblur="FuncBtnOut(this)" onmousedown="FuncBtnDown(this)" onmouseup="FuncBtnOut(this)" onclick="CheckAnswers()"> [strCheckCaption] </button>-->
4.
Now we're going to insert the image itself. Add this code below the old button:
<img src="correct-vt.gif"
alt="[strCheckCaption]"
title="Check your answer"
onclick="CheckAnswers()"
style="cursor: pointer;" />
5.
Now add a comment below, to show where your modifications end:
<!-- MDH_Custom: End of modification to Check button.-->
6.
Now save your changes, and make a little JCloze exercise to test your code. It would be a good idea to uncheck the "Include 'Hint' button" checkbox in the configuration screen, so that you don't have an ordinary HotPot Hint button right next to your new image. Here's an example.