title: Clicking an image in a table
body: <p>Currently when the mouse is dragged over a cell, the code below will highlight permissible cells to drag the selected piece to.</p>
  
  <p>I need to modify the code to include clicking as well. For example, when the mouse is dragged over a cell, permissible cells are highlighted. When the same cell is clicked the permissible cells will remain highlighted until either the original cell is clicked again or until one of the highlighted locations is click where upon the image will appear. How can I do this?</p>
  
  <p>Thanks.</p>
  
  <p><a href="http://jsfiddle.net/bLb3H/42/" rel="nofollow">Current fiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table border="1" id="tbl"&gt;
    &lt;tr&gt;
      &lt;td &gt;&lt;/td&gt;
      &lt;td  bgcolor=#000000 &gt;&lt;/td&gt;
      &lt;td class="items  p1 p3"&gt;&lt;img src="http://icons.iconarchive.com/icons/deleket/soft-  scraps/32/Button-Blank-Red-icon.png"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td bgcolor=#000000 &gt;&lt;/td&gt;
      &lt;td class="items  p1"&gt;&lt;/td&gt;
      &lt;td class="items p3" bgcolor=#000000 &gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td class="piece" id="p1" &gt;&lt;img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png"&gt;&lt;/td&gt;
      &lt;td bgcolor=#000000 &gt;&lt;/td&gt;
      &lt;td class="piece" id="p3" &gt;&lt;img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" &gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$('img').draggable({  });
  $('#tbl td').droppable({
    hoverClass: 'over',
    drop: function(event, ui) {
      if ($(this).css("background-color")==='rgb(255, 255, 0)') {
        $(this).children('img').remove();
        var cell = ui.draggable.appendTo($(this)).css({
          'left': '0',
          'top': '0'
        });
        $('img').draggable('disable');
      } else {
        ui.draggable.draggable('option','revert',true);
      }
      $("td").each(function() {
        var id = $(this).attr("id");
        $("."+id).css("background", "");
      });
    }
  });
  $(".piece").mouseover(function() {
    id = $(this).attr('id');
    $("."+id).css("background", "yellow");
  }).mouseleave(function() {
    id = $(this).attr('id');
    $("."+id).css("background", "");
  });
  </code></pre>