マウスオーバー効果は、特定のキャンバスの場所でのみ作成する必要があります。さらに、MousePosition関数を作成しました(以下を参照)。Mouseover効果のコマンドは、MouseOverButton関数にある必要があります。
しかし、それでもうまくいかないようです。
私のコード:
function init() {
var can=document.getElementById("SnakeCanvas");
var ctx=can.getContext("2d");
can.addEventListener('mouseover',MouseOverButton, false);
}
function getPosition(event) {
var x = new Number();
var y = new Number();
var can = document.getElementById("SnakeCanvas");
if (event.x != undefined && event.y != undefined) {
x = event.x;
y = event.y;
} else {//Firefox Compatability//
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= can.offsetLeft;
y -= can.offsetTop;
return {mx:x, my:y};
}
function MouseOverButton(e) {
var can=document.getElementById("SnakeCanvas");
var ctx=can.getContext("2d");
var cell=getPosition(event);
if ((cell.mx > 854 && cell.mx < 985) && (cell.my > 256 && cell.my < 315)) {
ReplaceImage(ctx,'Images/New_Game_Hover.png',570,100,140,70);
}
}