Question

I want to add a simple flag that changes its color when clicked (e.i. transparent flag changes to red when flagged) for the web based exam I’m working on. Could someone help or give me a script on this.

Answer 1

The simplest way is to use two images. When it’s clicked, you hide one image and show the other. Working demo here: http://jsfiddle.net/jfriend00/yzYJ3/

HTML:

<div id="container">
<img src="http://photos.smugmug.com/photos/344287800_YL8Ha-Ti.jpg">
<img src="http://photos.smugmug.com/photos/344284440_68L2K-Ti.jpg" style="display: none;">
</div>

CSS:

#container {position: relative; height: 66px; width: 100px;}
#container img {position: absolute; top:0; left:0}

JS (jQuery):

var flagged = false;
$("#container").click(function() {
    $(this).find("img").toggle();
    flagged = !flagged;
});