javascript pour ajouter un élément surfacique avec l'attribut onmouseover

Question

J'essaie d'ajouter dynamiquement des éléments surfaciques à un mappage d'image. L'image est définie pour s'afficher de manière transparente sur une toile. Mon but est d'écrire du texte sur le canevas, d'utiliser les mêmes coordonnées pour créer l'élément area sur la carte et de dessiner un rectangle sur la toile entourant le texte lorsque l'utilisateur survole le texte. (En fin de compte, je veux aussi déclencher une infobulle). Je l'ai déjà fait avec la même configuration de carte et de canevas en utilisant des éléments surfaciques codés en HTML.

Mon problème est que je peux créer la zone, appendChild à l'élément de carte et ajouter des attributs. Cependant, passer la souris sur le texte ne déclenche jamais l'appel de la fonction pour dessiner le rectangle.

La fonction utilisée pour ajouter les zones à la carte (représentée par cMap) est "addArea", et la fonction permettant de dessiner le rectangle sur la toile (contexte est ctx) est "labelHover". J'ai essayé toutes les différentes syntaxes que j'ai vu démontré pour ajouter l'attribut .onmouseover à la zone, mais l'alerte dans la fonction labelHover ne se déclenche jamais.

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

et

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

Merci pour toute aide.

Answer 1

essayez ceci:

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