How do I get javascript-generated image maps to work with internet explorer?

Question

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);
    }
  }
}

Answer 1

Solved.

I've concluded that internet explorer doesn't add appropriate event processing to the dynamically generated area elements. Whereas the original area elements will fire mouse-over events, the dynamically added elements do not. The following code adds mouse-over events to the dynamically added area elements:

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 + "})();");
    }
  });
}

The mouse-over events now fire as expected, and my dynamically generated image map behaves like a static one in IE.