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

Posted by schwerwolf on Stack Overflow See other posts from Stack Overflow or by schwerwolf
Published on 2010-04-14T20:22:55Z Indexed on 2010/05/04 18:28 UTC
Read the original article Hit count: 260

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

© Stack Overflow or respective owner

Related posts about internet-explorer

Related posts about JavaScript