[Javascript] Problem with IE6 not registering an event handler

[andrewsyip at gmail.com (Andrew Ip)]

Hi everyone,

I'm trying to dynamically create an image map for a particular image
on my website, and I'm running into an issue where I try to register
the "mouseover" and "mouseout" events for the AREAs of my image map.

Here is an abbreviated version of my code:

------------------------

function createImageMap() {

   var divParent = document.getElementById("divParent");

   var newMapNode = document.createElement("map");
   // set name, id attributes for the newly created map node

   for (var i = 0; i < arrayOfPoints.length; i++) {

       var mapElement = arrayOfPoints[i];

       var areaNode = document.createElement("area");
       // set the alt, nohref, shape, coords attributes for the area node

       var showMouseOverFunc = function(evt) {
           showMouseOver(evt, mapElement);
       };

       var hideMouseOverFunc = function(evt) {
           hideMouseOver(evt);
       };

       if (areaNode.addEventListener) {

           areaNode.addEventListener("mouseover", showMouseOverFunc, false);
           areaNode.addEventListener("mouseout", hideMouseOverFunc, false);

       } else if (areaNode.attachEvent) {

           areaNode.attachEvent("onmouseover", showMouseOverFunc);
           areaNode.attachEvent("onmouseout", hideMouseOverFunc);

       } else {

           areaNode.onmouseover = showMouseOverFunc;
           areaNode.onmouseout = hideMouseOverFunc;

       }

       newMapNode.appendChild(areaNode);

   }

   divParent.appendChild(newMapNode);
   document.getElementById("imgMap").setAttribute("usemap", "#map");
}

------------------------------

I've tested this in Firefox 2, and it works just fine with the DOM
Level 0 and 2 event models; the events appear to be registered with
their respective area elements and fire when I mouse over and out of
those areas.

However, when I try to run the same code in IE6, the events do not
appear to be registered at all.

A couple things I've already tried (no luck so far):

1) Sticking a debug alert() call inside the event functions.

2) Using the Level 0 event model (i.e. the statements in the
else-clause) instead of using IE's attachEvent() method.

3) Following a suggestion from comp.lang.javascript, I tried including
the name attribute and value when using the document.createElement()
method for the MAP element, since MSDN states that, for IE, the NAME
attribute cannot be set at run time on dynamically created elements.

Can anyone please help me on this issue?

Sincerely,
Andrew