title: Allow users to select an arbitrary element on the page
body: <p>I'm coding a templating system that is supposed to support easily converting any old html/xhtml form into a format that can be used with my system (it's a template system for my cms).</p>
  
  <p>Here's what I'm aiming for:</p>
  
  <ol>
  <li>The user clicks a "Zone Define" button for example: "Content", "Sidebar", etc</li>
  <li>When the user hovers any elements they become get a border or are highlighted somehow</li>
  <li>If the user clicks that element it is modified to have a class like 'zone-content'</li>
  <li>The page sends the new html to the script via ajax</li>
  </ol>
  
  <p>Is there any already existing libraries that would facilitate something like this? </p>
  
  <p>UPDATE:</p>
  
  <p>I ended up using the answers below and hacking together a jquery solution (we're going to use jquery in the rest of the project). It's a bit ugly and hacky but it works
  <a href="http://ilsken.com/labs/template/" rel="nofollow noreferrer">http://ilsken.com/labs/template/</a></p>