470,561 Members | 2,180 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,561 developers. It's quick & easy.

Problem with IE6 not registering an event handler

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

Nov 22 '06 #1
4 1621

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

Nov 22 '06 #2
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>");
Nov 22 '06 #3
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

Nov 22 '06 #4
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.

Nov 29 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Pavils Jurjans | last post: by
1 post views Thread by cjl | last post: by
2 posts views Thread by Andrew Banks | last post: by
reply views Thread by shapper | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.