i have spent hours trying find answer this, can't find describes i'm trying do. have 6 images shaped jigsaw puzzle pieces, , place them in proper position on canvas. want each of puzzle pieces act button, when user clicks on piece, can capture event , navigate new page.
everything have found talks using html buttons , placing them on canvas using css- these images being oddly shaped jigsaw pieces, can't that.
is possible capture mouse events when on top of particular image?
thanks....
ok, i've managed track cursor on each individual puzzle piece. now, i'm trying display different version of image when cursor hovers on piece (a prelude opening new page). trying store original image , hover image in points array, nothing try seems work. need able show hover image when cursor on piece, , restore when cursor moves away (haven't gotten far yet). right now, 404 errors when try pull image out of points array- tried storing actual image variable , image pathname, no avail.
here's 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 browser we're handling event e.preventdefault(); e.stoppropagation(); mousex=parseint(e.clientx-offsetx); mousey=parseint(e.clienty-offsety); // put 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 in shape "+ ); 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 console following: [error] failed load resource: server responded status of 404 (not found) ([object htmlimageelement], line 0) [log] hover image is: [object htmlimageelement] (index.html, line 168)
is there trivial thing i'm missing on how save images in points array?
thanks.....
Comments
Post a Comment