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[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. Â*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]

Andrew Ip wrote:

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

>
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,

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("us emap", "#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
Andrew wrote:

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

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