Problem with IE6 not registering an event handler

[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;

       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.  I've tried sticking an alert() call
inside the functions that are to be called when the events fire and
had no luck.  I've also tried using the Level 0 event model (i.e. in
the else-clause) instead of IE's attachEvent() method and had no luck
either.

Can anyone please help me on this issue?

Sincerely,
Andrew

 

[marss]

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

MSDN says: "The NAME attribute cannot be set at run time on elements
dynamically created with the createElement method. To create an element
with a name attribute, include the attribute and value when using the
createElement method."

Change quoted lines with
var newMapNode = document.createElement("<map name='map1'></map>");

 

[Andrew]

Hi marss,

Thanks for your reply. I tried your suggestion and I don't seem to
have any luck. Do you have any other ideas?

Sincerely,
Andrew


marss wrote:

-- snip --

 

[Andrew]

Hi marss,

I figured out the problem, which was due to a combination of two
things.

1) IE's inability to set the NAME attribute of a dynamically created
element at runtime, as you pointed out.

2) The problem of IE being really particular about the case-sensitivity
of the img tag's "usemap" attribute when I was setting it in the last
line of my function (IE insists that it should be "useMap").

So, I changed the last line of my function to read:

document.getElementById("imgMap").setAttribute("usemap", "#dynamicMap",
0);

where the 0 means "case-insensitive" for the attribute name, and 1
means "case-sensitive". I only stumbled upon this after inspecting the
DOM tree and trying to figure out why the DOM inspector for the IE
Developer Toolbar was not showing the attributes that I set for the
area element.

For this part of the issue, I found the solution at
(http://www.webmasterworld.com/html/3142618.htm).

Thank you very much for all your help.

Sincerely,
Andrew

 

[yuri.plakosh]

Hi.
I have the same issue in IE. But I used useMap attribute name. The
problem in my case was that I had not set id attribute for the map (I
had set only name attribute). It worked with name attribute in Firefox
and Opera, but not in IE.