By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,377 Members | 1,688 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,377 IT Pros & Developers. It's quick & easy.

Problem with IE6 not registering an event handler

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a

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

P: n/a
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

P: n/a
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

P: n/a
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.