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屬性

回答

相關問題