title: How do I make an imagemap area clickable with jQuery?
body: <p>Minimal, complete example (<a href="https://jsfiddle.net/Lo7cssq5/" rel="nofollow noreferrer">jsfiddle</a>):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;map name="myMap" id="myMap"&gt;
              &lt;area shape="rect" coords="10,10,100,100"&gt;
          &lt;/map&gt;
          &lt;img src="http://placehold.it/350x150" alt="" usemap="#myMap"&gt;
  
          &lt;script type="text/javascript"&gt;
              $(function () {
                  $("map#myMap area").click(function () {
                      alert("click!");
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What different browsers do when hovering over the upper left-hand corner of the image:</p>
  
  <ul>
  <li><strong>Chome</strong>: Shows the "hand" cursor and reacts to clicks (this is the behavior I actually want).</li>
  <li><strong>Firefox</strong>: Does not show the "hand" cursor, but reacts to clicks.</li>
  <li><strong>IE</strong> and <strong>Edge</strong>: Neither show the "hand" cursor nor react to clicks.</li>
  </ul>
  
  <p>I know that I can put <code>href</code> in the area tag, but it's a highly dynamic site and I'd like to do all sort of jQuery stuff with the area (hover highlight, click handler, etc.). I also know that I can fix Firefox's behavior with <code>area { cursor: pointer; }</code>, but that doesn't help with IE and Edge.</p>
  
  <p>Do I have a bug somewhere in my code or is this a bug in IE/Edge?</p>