Jump to content

How to use a mouseover successfully ?


Vihart
 Share

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>

Edited by Askey
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...