title: Javascript generated image maps don't link in any IE
body: <p>In this static version, in any browser, you can click on the close area to jump to <a href="http://www.google.com" rel="nofollow noreferrer">http://www.google.com</a>.</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div id="my_div"&gt;
          &lt;img usemap="#map"
              src="http://specialmedia.wnyc.org.s3.amazonaws.com/ads/open.jpg" /&gt;
          &lt;map name="map" id="map"&gt;
              &lt;area shape="rect" coords="900,0,1000,20"
                  href="http://www.google.com/" target="" alt="" /&gt;
          &lt;/map&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This dynamic version should be identical, and is in every browser except IE6, IE7, and IE8. In the IEs, the map has no effect.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        google.load("jquery", "1");
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="my_div"&gt;&lt;/div&gt;
      &lt;script&gt;
        var img = $("&lt;img/&gt;").attr("usemap", "#map");
        img.attr("src", "http://specialmedia.wnyc.org.s3.amazonaws.com/ads/open.jpg");
        var map = $("&lt;map/&gt;").attr("name", "map").attr("id", "map");
        var area = $("&lt;area/&gt;").attr("shape", "rect");
        area.attr("coords", "900,0,1000,20")
        area.attr("href", "http://www.google.com/").attr("target", "")
        area.attr("alt", "");
        map.append(area);
        $("#my_div").append(img).append(map);
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Is there a way to make Javascript generated image maps in IE? I tried <code>$(document.ready(...</code> already.</p>