Javascript添加具有onmouseover属性的area元素

Question

I am trying to add area elements to an image map dynamically. The image is set to display transparently superimposed over a canvas. My goal is to write text on the canvas, use the same coordinates to create the area element on the map, and draw a rectangle on the canvas surrounding the text when the user hovers over the text. (Ultimately I want it to trigger a tooltip, too.) I have done this already with the same map and canvas setup using area elements hardcoded in HTML.

My problem is that I can create the area, appendChild it to the map element and add attributes. However, mousing over the text never triggers the function call to draw the rectangle.

The function used to add the areas to the map (shown as cMap) is "addArea", and the function to draw the rectangle on the canvas (context is ctx) is "labelHover". I have tried every different syntax I have seen demonstrated for adding the .onmouseover attribute to the area, but the alert in the labelHover function never triggers.

function addArea(pX, lY, idX, tipText) {
    var labelArea = document.createElement('area');
    cMap.appendChild(labelArea);
    labelArea.className = "labelArea";
    var tlTipID = "tlTip" + idX;
    labelArea.id = tlTipID;
    labelArea.shape = "rect";
    areaCoords = pX + "," + (lY + 42) + "," + (pX + 100) + "," + (lY + 54);
    labelArea.coords = areaCoords;
    // alert(labelArea.coords);
    labelArea.onmouseover = function(){labelHover(pX, lY+42)};
    labelArea.onmouseleave = function(){labelLeave(pX, lY+42)};
}

and

function labelHover(ulx,uly) {
   ctx.lineWidth = "1";
   ctx.strokeStyle = "#ff0000";
   ctx.strokeRect(ulx,uly,100,12);
   alert(ulx);
}

Thanks for any help.

Answer 1

try this:

labelArea.setAttribute('onmouseover', "labelHover('" + pX + "," + (lY+42) + "')");
labelArea.setAttribute('onmouseout', "labelLeave('" + pX + "," + (lY+42) + "')");