Jump to content

How to use a mouseover successfully ?


Vihart

Recommended Posts

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...