Сгенерированные Javascript карты изображений не связаны ни в одном IE - PullRequest
0 голосов
/ 11 января 2010

В этой статической версии, в любом браузере, вы можете нажать на область закрытия, чтобы перейти к 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(....

1 Ответ

1 голос
/ 11 января 2010

в jquery есть ошибка (должна быть исправлена ​​в 1.4), которая препятствует добавлению area к map элементам

Я могу ошибаться, но это потому, что HTML-теги, которые нужно добавитьсначала создается внутри элемента div, и IE не распознает теги area в div s как допустимые ... и поэтому игнорирует их.

Лучший обходной путь - создание целого map element в виде строки, а затем добавьте весь элемент map вместе с дочерними area s в 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);
...