Question

我正在尝试动态地将区域元素添加到图像映射中。图像设置为透明地叠加在画布上。我的目标是在画布上编写文本，使用相同的坐标在地图上创建区域元素，并在用户将鼠标悬停在文本上时在文本周围的画布上绘制一个矩形。（最终我希望它也能触发工具提示。）我已经使用HTML中硬编码的区域元素使用相同的地图和画布设置完成了这项工作。

我的问题是我可以创建区域，将它附加到地图元素并添加属性。然而，鼠标悬停在文本上永远不会触发函数调用来绘制矩形。

用于将区域添加到地图的函数（显示为cMap）是“addArea”，在画布上绘制矩形的函数（上下文是ctx）是“labelHover”。我已经尝试了所有用于将.onmouseover属性添加到区域的不同语法，但labelHover函数中的警报永远不会触发。

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

和

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

感谢您的帮助。

Answer 1

试试这个：

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

javascript用onmouseover属性添加area元素

1 个答案: