title: Add or Remove a Mark on Image using Jquery
body: <p>I've a html DIV as follows</p>
  
  <pre><code>&lt;div id="mapimage" style="background-image: url('images/physical-map.jpg'); width: 500; height: 548; background-repeat: no-repeat"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>To add a mark on this DIV background image, I'm doing as following. </p>
  
  <pre><code>$(document).ready(function () {
      $('div#mapimage').mousedown(function (e) {
           e.preventDefault();
                  var x = e.pageX - this.offsetLeft;
                  var y = e.pageY - this.offsetTop;
                  var img = $('&lt;img&gt;');
                  img.css('top', y);
                  img.css('left', x);
                  img.attr('src', 'images/red-dot.png');
                  img.appendTo('#mapimage');
      });
  </code></pre>
  
  <p>This is working fine, What I need is -
  First time, I'll add a mark at position (10,122) on a DIV. And If I click on same position on Second time, The added mark should be removed from there. How to do this?</p>