如何让JavaScript生成的图像映射与Internet Explorer一起使用？

Question

我正在使用javascript为我在Web服务器上生成的图像生成高分辨率网格。 高分辨率网格由具有数百个“区域”子元素的“map”元素组成。 每个'area'元素都有onmouseover属性，导致弹出框的显示。

在将地图分配给img（通过usemap属性）后，Internet Explorer忽略了我通过javascript添加的区域元素的'onmouseover'属性。

该行为不是由IE和其他浏览器之间的语法变化引起的。 静态映射行为正确。 只有我动态添加到现有图像映射的元素才能触发相应的鼠标悬停事件。

如何让IE为添加的“区域”元素触发鼠标悬停事件？

function generate_image_map ( img ) { 
  var tile_width = 8;
  var tile_height = 10;
  var plotarea_left = 40;
  var plotarea_top = 45;
  var column_count = 100;
  var row_count = 120;

  var img_id = YAHOO.util.Dom.getAttribute(img, "id");
  var img_map_id = YAHOO.util.Dom.getAttribute(img, "usemap");
  var original_map = YAHOO.util.Selector.query(img_map_id)[0];

  var area_nodes = YAHOO.util.Selector.query("area", original_map);
  var last_node = area_nodes[area_nodes.length - 1];
  for (var y = 0; y < row_count; y++) {
    var top = Math.round(plotarea_top + (y * tile_height));
    var bottom = Math.round(plotarea_top + (y * tile_height) +
        tile_height);
    for (var x = 0; x < column_count; x++) {
      var left = Math.round(plotarea_left + (x * tile_width));
      var right = Math.round(plotarea_left + (x * tile_width) +
          tile_width);
      var area = document.createElement("area");
      YAHOO.util.Dom.setAttribute(area, "shape", "rect");
      YAHOO.util.Dom.setAttribute(area, "onmouseover",
        "alert('This does not appear in IE')"
      );
      var coords = [
        left, top,
        right, bottom
      ];
      YAHOO.util.Dom.setAttribute(area, "coords", coords.join(","));
      YAHOO.util.Dom.insertBefore(area, last_node);
    }
  }
}

Answer 1

在IE4和NS4的时代，IE总是宽容的浏览器，它吞噬了我们各种各样的小错误，似乎至少对于这个IMG，MAP和AREA功能来说，表格都是转向的。

通过createElement和appendChild动态创建和添加带有地图的地图的图像，FireFox第一次工作而IE不工作（现在结束2012 Win7 IE9！）。

毕竟检查，调整和调整IE仍然无法正常工作。 我发现FF和IE工作的唯一解决方案是将innerHTML与你通常在体内输入的东西一起喂食。

我觉得很棒！ 至少解决方案适用于两者，但一分钟后我无法忍受，因为我在这 - 通过书籍createElement和appendChild路由 - 我喜欢一致地创建文档。

我开始使用IE的innerHTML代码旁边的FF的createElement和appendChild代码。 然后我将IMG标签从innerHTML移动到createElement和appendChild路由。 它不再适用于IE并开始尝试和尝试。 然后我对其他标签做了同样的事情并且在整个下午尝试之后，最终我发现了IE的完整但狭窄的路径。

用于图像创建：

//USE THIS:
img = new Image(width, height);
//DOES NOT WORK:
img = document.createElement('IMG');
img.width = width;
img.height = height;
//DOES NOT WORK:
img = new Image();
img.width = width;
img.height = height;

像往常一样分配像.src这样的道具。

在脚本中使用camel-case属性

//USE THIS:
img.useMap = '#myMap';
//DOES NOT WORK:
img.usemap = '#myMap';

HTML道具不区分大小写，但在脚本中它们区分大小写。

这是一个没有文档记录，非常有趣（不是！），对于MS来说只是为了补充bug / quirck，从IE4开始构建MAP标签后仍然在IE9中。 无论如何...

//USE THIS:
map = document.createElement('MAP');
map.id = "myMap";
map.name = "myMap";
//DOES NOT WORK:
map = document.createElement('MAP');
map.name = "myMap";

在HTML中，IE使用.name属性，但在脚本IE中使用.id属性。 如果您使用FF和IE代码分叉，我仍然会在IE代码中保留.name prop以防MS修复它。

最后，这是使用createElement和appendChild路由的IE和FF的一段代码，是的！：

document.write('<INPUT type="button" value="Dynamic Image Map" onclick="dynamicImageMap(32, 64)">');
function dynamicImageMap(ox, oy)
{
    var a, b, map, img, div, s;

    a = document.createElement('AREA');
    a.shape = 'rect';
    a.coords = '128,0,250,128';
    a.noHref = true;

    b = document.createElement('AREA');
    b.shape = 'rect';
    b.coords = '0,128,128,250';
    b.noHref = true;

    map = document.createElement('MAP');
    map.id = "myMap";
    map.name = "myMap";
    map.onclick = function(){ alert('myMap'); }

    map.appendChild(a);
    map.appendChild(b);

    img = new Image(250, 250);
    img.src = 'http://www.vectortemplates.com/raster/batman-logo-big.gif';
    img.border = 0;
    img.useMap = '#myMap';

    div = document.createElement('DIV');

    s = div.style;
    s.position = 'absolute';
    s.left = ox +'px';
    s.top = oy +'px';
    s.width = '250px';
    s.height = '250px';
    s.overflow = 'hidden';
    s.visibility = 'inherit';

    div.appendChild(map);
    div.appendChild(img);

    document.body.appendChild(div);
}

图像映射区域使图像的左下角和右上角四分之一处于热点状态。 将图像src替换为现有图像src，以防它不再存在/工作。

Goodluck和Phun！

Answer 2

解决了。

我得出结论，Internet Explorer不会为动态生成的区域元素添加适当的事件处理。 原始区域元素将触发鼠标悬停事件，而动态添加的元素则不会。 以下代码将鼠标悬停事件添加到动态添加的区域元素：

if (YAHOO.env.ua.ie > 0) {
  YAHOO.util.Event.addListener(original_map, "mousemove", function (e) {
    var area = YAHOO.util.Event.getTarget(e);
    var mouseover = YAHOO.util.Dom.getAttribute(area, "onmouseover");
    if (mouseover !== null) {
      eval("(function() {" + mouseover + "})();");
    }
  });
}

鼠标悬停事件现在按预期触发，我动态生成的图像映射在IE中的行为类似于静态映像。