JavaScript添加区域元素与onmouseover属性

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

我的问题是我可以创建该区域，将它添加到地图元素并添加属性。但是，鼠标移动文本从不触发函数调用来绘制矩形。

用于将区域添加到地图的功能（显示为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); 
}

感谢您的帮助。

来源

2015-09-04 ChuckPaGis

试试这个：

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

来源

2017-05-23 05:38:47 myoungjin

JavaScript添加区域元素与onmouseover属性

回答

相关问题