我正在使用 javascript 为我在 Web 服务器上生成的图像生成高分辨率网格。高分辨率网格由一个“map”元素和数百个“area”子元素组成。每个 'area' 元素都有一个 onmouseover 属性,它会导致显示一个弹出框。
将 map 分配给 img(通过 usemap 属性)后,Internet Explorer 会忽略我通过 javascript 添加的区域元素的“onmouseover”属性。
该行为不是由 IE 和其他浏览器之间的语法差异引起的。静态 map 行为正确。只有我动态添加到现有图像映射的元素无法触发其相应的鼠标悬停事件。
如何让 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);
}
}
}
最佳答案
解决了。
我已经得出结论,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 中表现得像静态映射。
关于javascript - 如何让 JavaScript 生成的图像映射与 Internet Explorer 一起使用?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/2640748/