Javascript 生成的图像地图不在任何 IE 中链接答案

【问题标题】：Javascript generated image maps don't link in any IEJavascript 生成的图像地图不在任何 IE 中链接
【发布时间】：2010-01-11 19:18:46
【问题描述】：

在这个静态版本中，在任何浏览器中，都可以点击关闭区域跳转到http://www.google.com。

<html>
  <body>
    <div id="my_div">
        <img usemap="#map"
            src="http://specialmedia.wnyc.org.s3.amazonaws.com/ads/open.jpg" />
        <map name="map" id="map">
            <area shape="rect" coords="900,0,1000,20"
                href="http://www.google.com/" target="" alt="" />
        </map>
    </div>
  </body>
</html>

这个动态版本应该是相同的，并且在除 IE6、IE7 和 IE8 之外的所有浏览器中都存在。在 IE 中，地图没有效果。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
  </head>
  <body>
    <div id="my_div"></div>
    <script>
      var img = $("<img/>").attr("usemap", "#map");
      img.attr("src", "http://specialmedia.wnyc.org.s3.amazonaws.com/ads/open.jpg");
      var map = $("<map/>").attr("name", "map").attr("id", "map");
      var area = $("<area/>").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);
    </script>
  </body>
</html>

有没有办法在 IE 中制作 Javascript 生成的图像映射？我已经尝试过$(document.ready(...。

【问题讨论】：

标签： javascript jquery internet-explorer imagemap

【解决方案1】：

jquery 中有一个错误（应该在 1.4 中修复），它阻止 area 附加到 map 元素

我可能错了，但这是因为要附加的 HTML 标记首先在 div 元素内创建，而 IE 无法将 divs 中的 area 标记识别为有效......因此忽略它们.

最好的解决方法是将整个 map 元素创建为字符串，然后将整个 map 元素连同子 areas 附加到 DOM 中

或者

等待 jquery 1.4 发布...

例如

var map=$("<map name='map' id='map'><area coords='900,0,1000,20' href='http://www.google.com/' alt='' /></map>");
$("#my_div").append(img).append(map);

【讨论】：