Problem with IE6 not registering an event handler

Discussion in 'Javascript' started by Andrew Ip, Nov 22, 2006.

  1. Andrew Ip

    Andrew Ip Guest

    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
     
    Andrew Ip, Nov 22, 2006
    #1
    1. Advertising

  2. Andrew Ip

    marss Guest

    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>");
     
    marss, Nov 22, 2006
    #2
    1. Advertising

  3. Andrew Ip

    Andrew Guest

    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, Nov 22, 2006
    #3
  4. Andrew Ip

    Andrew Guest

    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


    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
    >
    >
     
    Andrew, Nov 22, 2006
    #4
  5. Andrew Ip

    Guest

    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, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Juan T. Llibre
    Replies:
    2
    Views:
    4,032
    =?Utf-8?B?UmljaA==?=
    Dec 16, 2006
  2. Replies:
    1
    Views:
    733
    Damien
    Feb 22, 2007
  3. Chris Jewell
    Replies:
    7
    Views:
    382
    Noah Roberts
    Jul 21, 2006
  4. Samuel
    Replies:
    0
    Views:
    266
    Samuel
    Dec 28, 2008
  5. Pugi!
    Replies:
    0
    Views:
    255
    Pugi!
    Feb 5, 2007
Loading...

Share This Page