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

发布于 2024-08-17 07:43:22 字数 1565 浏览 8 评论 0原文

在此静态版本中，在任何浏览器中，您都可以点击关闭区域跳转到 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>

有没有办法让 Javascript 在 IE 中生成图像地图？我已经尝试了 $(document.ready(... 。

原文

In this static version, in any browser, you can click on the close area to jump to 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>

This dynamic version should be identical, and is in every browser except IE6, IE7, and IE8. In the IEs, the map has no effect.

<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>

Is there a way to make Javascript generated image maps in IE? I tried $(document.ready(... already.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

喵星人汪星人 2024-08-24 07:43:22

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

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

最好的解决方法是将整个 map 元素创建为字符串，然后将整个 map 元素与子 area 一起附加到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);

there is a bug in jquery (should be fixed in 1.4) which prevents area to be appended to map elements

I might be wrong, but it is because HTML tags to be appended are first created inside a div element, and IE does not recognise area tags in divs as valid... and therefore ignores them.

The best workaround would be to create the whole map element as a string and then append the whole map element along with the child areas to the DOM

wait for jquery 1.4 to be released...

e.g

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);

回复收藏 0 原文

~没有更多了~