3

我正在使用 javascript 为我在 Web 服务器上生成的图像生成高分辨率网格。高分辨率网格由一个“地图”元素和数百个“区域”子元素组成。每个 '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);
    }
  }
}
4

2 回答 2

1

解决了。

我得出的结论是，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 中表现得像一个静态映射。

于 2010-05-04T18:23:07.637 回答
1

在 IE4 和 NS4 的日子里，IE 总是宽容的浏览器，它吞下了我们开发中的各种小错误，似乎至少对于这个 IMG、MAP 和 AREA 功能来说，情况已经发生了翻天覆地的变化。

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

毕竟检查，调整和调整 IE 仍然无法正常工作。我能找到同时适用于 FF 和 IE 的唯一解决方案是使用您通常在正文中键入的内容提供 innerHTML。

我想的很棒！至少对两者都有效的解决方案，但一分钟后我受不了了，因为我在这方面 - 通过书 createElement 和 appendChild 路线 - 通过我喜欢始终如一地创建文档。

我从 FF 的 createElement 和 appendChild 代码开始，紧挨着 IE 的 innerHTML 代码。然后我将 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 这样的道具。

在脚本中使用驼峰式属性

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

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

这是一个未记录的、非常有趣的（不是！），对于 MS 来说只是为了愚蠢的错误/怪癖，在自 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 属性，以防 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，以防它不再存在/工作。

祝你好运，有 Phun！

于 2012-12-21T19:13:25.900 回答