Vihart Posted January 11, 2011 Share Posted January 11, 2011 Ive recently created a "map" although not very sophisticated (im working on it) it has the basic function and is generally heading in the right direction.If you look at it you can see tiny red dots and on those tiny red dots i want to mouseover it and see text basically but ive had a bit of trouble getting the code right. I want each red dot to display individual texthttp://hummingbird2.x10.mx/website%20creation/mainpage.htmThis is all the code so far.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Oynx Warrior</title><link rel="stylesheet" type="text/css" href="mystyle.css" /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Oynx Warrior</title><link rel="stylesheet" type="text/css" href="mystyle.css" /></head><body><h1>Oynx Warrior</h1><canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#red";cxt.beginPath();cxt.arc(54,109,1,0,Math.PI*2,true);cxt.closePath();cxt.fill();cxt.fillStyle="#red";cxt.beginPath();cxt.arc(116,193,1,0,Math.PI*2,true);cxt.closePath();cxt.fill();cxt.fillStyle="#red";cxt.beginPath();cxt.arc(112,187,1,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script></body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted January 11, 2011 Share Posted January 11, 2011 You'll probably need to have one mouseover event for the entire canvas, and when the event occurs get the x and y mouse coordinates, then loop through the points on your map to figure out if it is above any of them. You may also need to use the mousemove event if the mouseover event only fires once the cursor enters the canvas area.There's a good tutorial about how to handle that here:http://www.howtocreate.co.uk/tutorials/javascript/eventinfo Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.