Javascript HTML图像onmouseover事件未触发

我有一个显示在HTML5画布上的图像，我在其中添加了一个onmouseover事件，理论上应该调用在同一文件中编写的JavaScript函数

但是，当我查看页面并将光标悬停在图像上时，什么也没有发生

我已使用以下行将图像添加到HTML的隐藏部分：

<img id="assetBox" src = "images/box.png" alt="Assets" onmouseover = "displayAssetDescriptionTip()"/>

当检测到光标悬停在图像上时，我希望调用的函数是：

function displayAssetDescriptionTip(){
        document.getElementById('tipsParagraph').innerHTML = "Assets are items that can be bought or sold for cash.";
        console.log("displayAssetDescriptionTip being called");
}

但是，由于某种原因，当我在浏览器中查看我的页面，并将光标悬停在画布上的图像上时，不会发生任何事情，控制台中也不会显示任何内容。。。我假设这意味着我的onmouseover事件没有触发，但我不知道为什么会这样-有人能向我解释一下，并指出我需要做些什么才能使它正确

2013年2月22日14:40编辑

我尝试添加以下JS以跟踪我拥有的一个单独JS文件中的鼠标坐标：

/*Add code to keep track of the mouse coordinates */
var boundingBox = canvas.getBoundingClientRect();
var mousex = (mouse_event.clientX-boundingBox.left)*(canvas.width/boundingBox.width);
var mouseY = (mouse_event.clientY-boundingBox.top)*(canvas.height/boundingBox.height);

我知道我必须编写代码来告诉脚本如何处理坐标，但我只是想先尝试一下，因为我自己已经有一段时间没有处理坐标了。但是当我在浏览器中查看页面时，我得到一个控制台错误，该错误表示画布未定义，并抱怨行：

var boundingBox = canvas.getBoundingClientRect();

---

我想知道这是否是因为这是一个单独的脚本文件，在我刚刚添加它之前，它实际上没有任何对我正在使用的画布的引用。我是否需要再次定义它，即使它已在运行此脚本的HTML页面中定义？

仅绘制图像不会神奇地使图像表现为节点。例如，您不能更改其src并让它自动更改画布上显示的图像

---

相反，您必须在画布上使用onmousemove手动跟踪鼠标移动，然后计算鼠标悬停的位置，并采取措施。有过在Game Maker制作菜单的经验，我可以告诉你这很难

这是一个假设，但是所绘制的图像是一个不同的元素，而不是您使用onmouseover的元素。尝试向图像和正在绘制的图像添加一个类，并在类检查jQuery上设置onmouseover，以简化此过程

事实并非如此-如果您查看我在问题中粘贴的代码，您将看到我给onmouseover的图像具有ID assetBox，然后在我的drawDescriptionBox函数中，我使用document.getElementById获取assetBox并将其分配给变量AssetDescriptionBox。然后，我使用行context.DrawImageAssetDescriptionBox，70、400、120、70；将图像绘制到画布上，并且在此位置显示的是正确的图像。不是按id获取元素，本质上，您有两个具有相同id的图像，这将不起作用。你需要把它分配给一个类…好的，对不起，我误解了。你把它分配给一个类是什么意思，我该怎么做？我以前在JS中没有使用过类。我没有试图更改图像的src，只是检测光标何时悬停在图像上，并在检测到时调用函数。我调用的函数更改HTML中标记中显示的文本。我知道这个函数确实有效，因为当在画布上显示的其他图像上检测到单击时，我会调用它。我想对这些图像稍微修改一下，这样你就不用点击图像来显示文本了，你只需要悬停一下，因为其他图像是“可拖动的”，我从来没有说过你试图修改src，我只是说，作为元素和画布上绘制的图像之间区别的一个例子。好的，很抱歉那么，您是否建议使用onmousemove来检测光标当前位置的坐标，然后如果这些坐标落在绘制图像的坐标范围内，则调用我正在使用的函数来更改文本？没错，这就是我的建议。如果您注意，这里的每个人都正确回答了问题。你现在必须后退一步，试着去理解它。有时候，站起来做别的事情，然后回来，这会让我们陷入一种心态，而做别的事情会让我们摆脱这种心态。这只是一个关于未来问题的提示。你问了很多人，他们都回答了。您没有检查答案，也没有向任何人投赞成票或反对票。你应该参与到这方面来尊重你所得到的帮助，无论是负面的还是正面的反馈。嘿，我非常感谢大家的回应，并尝试了他们的建议。然而，建议的答案中没有一个真正解决了我面临的问题——因此我没有“接受”它们，而是对答案进行了评论，以进一步澄清问题，希望我能够找到解决方案。正确的答案如下

---

事情您面临的真正问题是不理解在画布上绘制图像时如何在附加事件方面操纵图像。如果你看看如何通过一个像raphael.js那样简化它的库来实现这一点，你实际上会解决它。我已经在画布上使用KineticJS库了-为了让一些图像可以拖动，虽然不是我想要附加onmouseover事件的那些，但是我想使用这两个库不会对游戏的性能产生负面影响吧？

var boundingBox = canvas.getBoundingClientRect();