How do I get javascript-generated image maps to work with internet explorer?
- by schwerwolf
I'm using javascript to generate a high resolution grid for an image that I generated on a web server. The high-resolution grid is composed of a 'map' element with hundreds of 'area' child elements. Each 'area' element has onmouseover attribute that causes the display of a popup box.
After assigning the map to the img (via the usemap attribute), Internet explorer ignores the 'onmouseover' attribute of the area elements that I added via javascript.
The behavior is not caused by syntactical variations between IE and other browsers. A static map behaves correctly. Only the elements that I add dynamically to an existing image map fail to fire their corresponding mouse-over events.
How can I get IE to fire the mouse-over event for the added 'area' elements?
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);
}
}
}
