Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    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!

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by maxhud View Post
    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)

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    147
    Thanks
    35
    Thanked 0 Times in 0 Posts
    how did you get xc yc and r?

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by maxhud View Post
    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)

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Ellipse MouseOver (2-April-2010)
    // by Vic Phillips http://www.vicsjavascripts.org.uk/
    
    
    function zxcEllipseMouseOver(id){
     var obj=document.getElementById(id),radx=obj.offsetWidth/2,rady=obj.offsetHeight/2,rad=Math.PI/180,ary=[],z0=0,cary,z1=1,z1a,dary=[],z2=0,z3=0;
     for (z0=0;z0<361;z0++){
      ary[ary.length]=[Math.floor(radx*Math.cos(z0*rad)+radx),Math.floor(rady*Math.sin(z0*rad)+rady)];
     }
     cary=[ary[0]];
     for (;z1<ary.length;z1++){
      for (var z1a=1;z1a<Math.abs(ary[z1-1][0]-ary[z1][0]);z1a++){
       cary.push([ary[z1-1][0]+((ary[z1-1][0]<ary[z1][0])?z1a:-z1a),ary[z1-1][1],ary[z1-1][2]]);
      }
      if (ary[z1][0]!=ary[z1-1][0]){
       cary.push(ary[z1]);
      }
     }
     for (;z2<cary.length;z2++){
      if (!dary[cary[z2][0]]){
       dary[cary[z2][0]]=['xy'];
      }
      dary[cary[z2][0]].push(cary[z2][1]);
     }
     ary=[];
     for (;z3<dary.length;z3++){
      if (dary[z3].length==3){
       ary[z3]=[dary[z3][1],dary[z3][2]].sort();
      }
     }
     this.obj=obj;
     this.ary=ary;
     this.addevt(document,'mousemove','move');
    
    //Demo Only
     for (var d,z3=0;z3<dary.length;z3++){
      if (dary[z3].length==3){
       d=document.createElement('DIV');
       d.style.position='absolute';
       d.style.left=z3+'px';
       d.style.top=dary[z3][1]+'px';
       d.style.width=1+'px';
       d.style.height=1+'px';
       d.style.backgroundColor='red';
       obj.appendChild(d);
       d=d.cloneNode(true)
       d.style.top=dary[z3][2]+'px';
       obj.appendChild(d);
      }
     }
    
    }
    
    
    zxcEllipseMouseOver.prototype={
    
     move:function(e){
      var mse=this.mse(e),pos=this.pos(this.obj),x=mse[0]-pos[0],y=mse[1]-pos[1],ary=this.ary[x];
    document.Show.Show0.value='out';
      if (ary&&y>ary[0]&&y<ary[1]){
    document.Show.Show0.value='over';
      }
      if (e.target) e.preventDefault();
      return false;
     },
    
     mse:function(e){
      if (window.event){
       var ds=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        ds=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       return [e.clientX+ds[0],e.clientY+ds[1]];
      }
      return [e.pageX,e.pageY];
     },
    
     addevt:function(o,t,f){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e); });
     },
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    }
    
    
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    http://www.codingforums.com/showthread.php?t=223066
    <div id="tst" style="position:absolute;left:100px;top:100px;width:100px;height:100px;border:solid red 1px;" ></div>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:500px;left:0px;" >
    <input size=100 name=Show0 >
    </form>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    new zxcEllipseMouseOver('tst');
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Last edited by vwphillips; 04-02-2011 at 04:52 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • The Following 2 Users Say Thank You to vwphillips For This Useful Post:

    maxhud (04-02-2011), oesxyl (04-04-2011)

  • #6
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    hi maxhud,
    you can use usemap attribute of <img>.
    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)

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by hdewantara View Post
    hi maxhud,
    you can use usemap attribute of <img>.
    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

  • #8
    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

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 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:
    <area shape="circle" coords="x,y,r" />
    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)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •