Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.

# Thread: JavaScript mouse position/circle collision

1. ## 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!

• 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)

• how did you get xc yc and r?

• 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)

• 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">

<title></title>
<script type="text/javascript">
/*<![CDATA[*/
// Ellipse MouseOver (2-April-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

function zxcEllipseMouseOver(id){
for (z0=0;z0<361;z0++){
}
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;

//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];
},

var oop=this;
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>

<body>
<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>```

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

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

• 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)

• Originally Posted by hdewantara
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

• 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

• 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).

• ## The Following 2 Users Say Thank You to Old Pedant For This Useful Post:

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

•