Home/ Questions/Q 541059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:18:16+00:00

In this static version, in any browser, you can click on the close area

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    Or

    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