HTML image onmouseover event not firing

Question

I have an image that's being displayed on an HTML5 canvas, to which I have added an onmouseover event that theoretically should call a JavaScript function that has been written in the same file.

However, when I view my page, and hover the cursor over the image, nothing happens.

I've added the image to a hidden section of my HTML using the line:

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

The image has then been drawn to the canvas using the function:

function drawDescriptionBoxes(){
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");
assetsDescriptionBox.src = 'images/box.png';
liabilitiesDescriptionBox.src = 'images/box.png';
incomeDescriptionBox.src = 'images/box.png';
expenditureDescriptionBox.src = 'images/box.png';

context.drawImage(assetsDescriptionBox, 70, 400, 120, 70);
context.drawImage(liabilitiesDescriptionBox, 300, 400, 120, 70);
context.drawImage(incomeDescriptionBox, 530, 400, 120, 70);
context.drawImage(expenditureDescriptionBox, 760, 400, 120, 70);

context.strokeText("Assets", 100, 490);
context.strokeText("Liabilities", 325, 490);
context.strokeText("Income", 550, 490);
context.strokeText("Expenditure", 775, 490);


}

and the function that I want to be called when the cursor is detected as hovering over the image is:

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

But, for some reason, when I view my page in the browser, and hover the cursor over the image on the canvas, nothing happens, and nothing is displayed in the console... I assume that this means that my onmouseover event isn't firing, but I have no idea why this is- can anyone explain it to me, and point out what I need to do to get it right?

Edit 22/02/2013 @ 14:40

I tried adding the following JS to keep track of the mouse coordinates in one of the separate JS files I have:

/*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);

I know I will have to write the code to tell the script what to actually do with the coordinates, but I just wanted to give this a try first, since it's been a while since I've done any work with coordinates myself. But when I view the page in a browser, I'm getting a console error that says that "canvas is not defined, and complains about the line:

var boundingBox = canvas.getBoundingClientRect();

I'm wondering if this is because this is a separate script file, and doesn't actually have any reference to the canvas I'm using until where I've just added it. Do I need to define it again, even though it's already been defined in the HTML page that this script is being run on?

Answer 1

Just drawing an image doesn't magically make the image behave like a node. For instance, you can't change its src and have it automatically change the image shown on the canvas.

Instead, you have to manually track mouse movement with onmousemove on the canvas, then compute what the mouse is hovering over and do something about it. Having had experience making menus in Game Maker, I can tell you it's hard as hell!

Answer 2

This is an assumption, but the image that is drawn is a different element then the one that you have the onmouseover on. Try adding a class to the image and the one being drawn and set the onmouseover on the class (check jQuery to make this process easier)