Flash Website Builder- Trendy Site Builder is a Flash Site Building tool that helps users build stunning websites. Check Out Custom Custom Logo Design by LogoBee. Website Design and Free Logo Templates available.
 CodingForums.com JavaScript mouse position/circle collision

Before you post, read our: Rules & Posting Guidelines

Enjoy an ad free experience by logging in. Not a member yet? Register.
 04-02-2011, 08:52 AM PM User | #1 maxhud Regular Coder   Join Date: Mar 2011 Posts: 147 Thanks: 35 Thanked 0 Times in 0 Posts JavaScript mouse position/circle collision so basically I have a div that contains the image of a circle and I need to check if the mouse is touching the circle. what approach should I take to this? I need to call another function when the mouse leaves the circle (which will be a square speaking physically) I would assume it has to do with radius, but I am not really sure how to do this with a circle shape. thanks a ton!
04-02-2011, 09:13 AM   PM User | #2
oesxyl
Master Coder

Join Date: Dec 2007
Posts: 6,682
Thanks: 436
Thanked 890 Times in 879 Posts
Quote:
 Originally Posted by maxhud so basically I have a div that contains the image of a circle and I need to check if the mouse is touching the circle. what approach should I take to this? I need to call another function when the mouse leaves the circle (which will be a square speaking physically) I would assume it has to do with radius, but I am not really sure how to do this with a circle shape. thanks a ton!
what means 'touching the circle'? is inside?
anyway you need to get x,y for the mouse position, and based of the data about circle, xc, yc and radium r to check if is the solution of the ecuation.
Code:
`result = (xc - x)^2 + (yc - y)^2 - r^2`
if result > 0 then is outside, < 0 is inside, == is on the border.

best regards

 Users who have thanked oesxyl for this post: maxhud (04-02-2011)
 04-02-2011, 09:36 AM PM User | #3 maxhud Regular Coder   Join Date: Mar 2011 Posts: 147 Thanks: 35 Thanked 0 Times in 0 Posts how did you get xc yc and r?
04-02-2011, 10:04 AM   PM User | #4
oesxyl
Master Coder

Join Date: Dec 2007
Posts: 6,682
Thanks: 436
Thanked 890 Times in 879 Posts
Quote:
 Originally Posted by maxhud how did you get xc yc and r?
you know the position of each corner, then xc and yc is the center of the square and r is half of the height or width.
if for example x1,y1 is upper left corner, x2,y2 is upper right corner, x3,y2 is lower left corner and x4,y4 is lower right corner:
Code:
`xc = (x1 + x2)/2`
Code:
`yc = (y1 + y3)/2`
Code:
`r = abs(x2 - x1)/2`
best regards

 Users who have thanked oesxyl for this post: maxhud (04-02-2011)
 04-02-2011, 04:14 PM PM User | #5 vwphillips Senior Coder   Join Date: Mar 2005 Location: Portsmouth UK Posts: 4,430 Thanks: 3 Thanked 480 Times in 467 Posts Code: ``` http://www.codingforums.com/showthread.php?t=223066
``` __________________ Vic God Loves You and will never love you less. http://www.vicsjavascripts.org.uk/ If my post has been useful please donate to http://www.operationsmile.org.uk/ Last edited by vwphillips; 04-02-2011 at 05:52 PM..
 The Following 2 Users Say Thank You to vwphillips For This Useful Post: maxhud (04-02-2011), oesxyl (04-04-2011)
 04-04-2011, 07:02 AM PM User | #6 hdewantara Regular Coder     Join Date: Aug 2009 Location: Jakarta, Indonesia. Posts: 308 Thanks: 5 Thanked 44 Times in 44 Posts hi maxhud, you can use usemap attribute of . Then you can call your function as the onmouseout 's funcition of map's area.
 Users who have thanked hdewantara for this post: oesxyl (04-04-2011)
04-04-2011, 07:51 AM   PM User | #7
oesxyl
Master Coder

Join Date: Dec 2007
Posts: 6,682
Thanks: 436
Thanked 890 Times in 879 Posts
Quote:
 Originally Posted by hdewantara hi maxhud, you can use usemap attribute of . Then you can call your function as the onmouseout 's funcition of map's area.
good idea, xhtml 2 have a shape 'circle', i'm curious how it work with xhtml 1.1 or others in different browsers.

best regards

 04-06-2011, 01:03 AM PM User | #8 maxhud Regular Coder   Join Date: Mar 2011 Posts: 147 Thanks: 35 Thanked 0 Times in 0 Posts thanks guys. ill give it a go and see if it works. this is wierd since we just learmed how to graph ellipses in math a month ago or so
 04-06-2011, 02:01 AM PM User | #9 Old Pedant Supreme Master coder!     Join Date: Feb 2009 Posts: 24,946 Thanks: 75 Thanked 4,306 Times in 4,273 Posts shape="circle" is defined in HTML 4.0 and W3C DOM Level 1.0. So it's been around for at least 10 years or so. (Level 1 is dated September 2000.) So far as I know, all browsers from about MSIE 5 onward have supported it. Code: `` where x and y specify the location of the center of the circle and r specifies the radius (all in pixels). __________________ An optimist sees the glass as half full. A pessimist sees the glass as half empty. A realist drinks it no matter how much there is.
 The Following 2 Users Say Thank You to Old Pedant For This Useful Post: maxhud (04-06-2011), oesxyl (04-06-2011)

 Bookmarks

 Thread Tools Rate This Thread Rate This Thread: 5 : Excellent 4 : Good 3 : Average 2 : Bad 1 : Terrible

 Posting Rules You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off Forum Rules
 Forum Jump User Control Panel Private Messages Subscriptions Who's Online Search Forums Forums Home :: Client side development     JavaScript programming         DOM and JSON scripting         Ajax and Design         JavaScript frameworks         Post a JavaScript     HTML & CSS     XML     Flash & ActionScript         Adobe Flex     Graphics and Multimedia discussions     General web building         Site reviews         Building for mobile devices :: Server side development     Apache configuration     Perl/ CGI     PHP         Post a PHP snippet     MySQL         Other Databases     Ruby & Ruby On Rails     ASP     ASP.NET     Java and JSP     Other server side languages/ issues         ColdFusion         Python :: Computing & Sciences     Computer Programming     Computer/PC discussions     Geek News and Humour Web Projects and Services Marketplace     Web Projects         Small projects (quick fixes and changes)         Medium projects (new script, new features, etc)         Large Projects (new web application, complex features etc)         Unknown sized projects (request quote)         Vacant job positions         Looking for work/ for hire         Project collaboration/ partnership         Paid work offers and requests (Now CLOSED)     Career, job, and business ideas or advice     Domains, Sites, and Designs for sale         Domains for sale         Websites for sale         Design templates and graphics for sale :: Other forums     Member Offers     Forum feedback and announcements

All times are GMT +1. The time now is 03:46 AM.