Canvas images as buttons - html

Question

I have spent hours trying to find an answer to this, but can't find anything that exactly describes what I'm trying to do. I have 6 images that are shaped like jigsaw puzzle pieces, and I place them in proper position on a canvas. What I really want is for each of those puzzle pieces to also act like a button, so when a user clicks on a piece, I can capture that event and then navigate to a new page.
Everything I have found talks about using html buttons and then placing them on the canvas using css- but with these images all being oddly shaped jigsaw pieces, I can't do that.
Is it even possible to capture mouse events when they are on top of a particular image?
Thanks....
Ok, I've managed to track the cursor over each individual puzzle piece. Now, I'm trying to display a different version of the image when cursor hovers over a piece (a prelude to opening a new page). I am trying to store the original image and hover image in the points array, but nothing I try seems to work. I need to be able to show the hover image when the cursor is over the piece, and then restore it when the cursor moves away (haven't gotten that far yet). Right now, I get 404 errors when i try to pull the image out of the points array- tried storing the actual image variable and image pathname, to no avail.
Here's the code:
<script type="text/javascript" language="JavaScript">
var canvas;
var canvasWidth;
var ctx;
function init() {
HideContent('readLess');
var cursors=['default','w-resize','n-resize'];
var currentCursor=0;
canvas = document.getElementById('puzzle-container');
canvas.width = 815;
canvas.height = 425;
canvas.align = 'center';
ctx = canvas.getContext("2d");
var search = new Image();
search.src = 'img/puzzleSearch.png';
var searchHover = new Image();
search.onload = function() {
ctx.drawImage(search, 0, 0);
};
var nav = new Image();
nav.src = 'img/puzzleNav.png';
var navHover = new Image();
nav.onload = function() {
ctx.drawImage(nav, 119, 2.5 );
}
.
.
.
.
var events = new Image();
events.src = 'img/puzzleEvents.png';
var eventsHover = new Image();
eventsHover.src = 'img/puzzleEventsHover.png';
events.onload = function() {
ctx.drawImage(events, 564, 265 );
}
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
$("#puzzle-container").mousemove(function(e){handleMouseMove(e);});
var shapes=[];
shapes.push({
points:[{x:0,y:2.5},{x:155,y:2.5},{x:155,y:205},{x:0,y:205}], cursor:1, img:search, imgHov:searchHover,
});
.
.
.
shapes.push({
points:[{x:0,y:310},{x:250,y:310},{x:250,y:400},{x:0,y:400}], cursor:1, img:events, imgHov:'img/eventsHover.png',
});
for(var i=0;i<shapes.length;i++){
var s=shapes[i];
definePath(s.points);
ctx.stroke();
}
function definePath(p){
ctx.beginPath();
ctx.moveTo(p[0].x,p[0].y);
for(var i=1;i<p.length;i++){
ctx.lineTo(p[i].x,p[i].y);
}
ctx.closePath();
}
function handleMouseMove(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var newCursor;
for(var i=0;i<shapes.length;i++){
var s=shapes[i];
definePath(s.points);
if(ctx.isPointInPath(mouseX,mouseY)){
if (i === 6 ) {
var img = new Image();
var imgSrc = s.imgHov;
img.src = imgSrc;
console.log("hover image is: " + s.imgHov );
ctx.drawImage(img, 564, 265 );
}
//console("the mouse is in shape "+ i );
newCursor=s.cursor;
break;
}
}
if(!newCursor){
if(currentCursor>0){
currentCursor=0;
canvas.style.cursor=cursors[currentCursor];
}
}else if(!newCursor==currentCursor){
currentCursor=newCursor;
canvas.style.cursor=cursors[currentCursor];
}
}
}
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>
On the console I get the following:
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) ([object HTMLImageElement], line 0)
[Log] hover image is: [object HTMLImageElement] (index.html, line 168)
Is there some trivial thing I'm missing on how to save the images in the points array?
Thanks.....