Page 1 of 1

click time and where

Posted: Tue Aug 13, 2002 3:11 pm
by fred
Hi folks,

I want to know how long somone clicked on an image and where. (ie. the time difference between mouse down and mouse up).

Should be simple!

This data will be passed as parameters to a php script.

I'm a newbee hacker at javascript :? and I've got some ideas of how to do it but I suspect there is a better way...

Code: Select all

<script>
	down_time =  new Date();
	up_time   =  new Date();
    function up()
	&#123;
		up_time = new_date;
		difference= up_time - down_time;  // milliseconds!
		
		location="foo.php?clicktime=" .difference . "&" . XY coords???? 
	&#125;
    function down()
	&#123;
		down_time = new Date;
	&#125;
 </script>
and the image to be clicked on:

Code: Select all

<img src="foo.gif" width="50" hight="50" onMouseUp="up()" onMouseDown="down()">
I don't have any ideas on how to get the X Y Coords yet.

----------------

So any thought or help would be great.

> Fred

Posted: Tue Aug 13, 2002 3:42 pm
by llimllib
Fred,

look on this page, about halfway down, at the screenX and screenY properties. This is just a quick guess - I find javascript such a pain that I avoid it when possible, but when I do need it, the reference I linked to is indispensible.

Posted: Tue Aug 13, 2002 4:43 pm
by daemorhedron
I just went through this, as I've recently been working with JS and now DOM. I am sure there is better, but I wrote a little lib to track the x and y of the users mouse. Seems to work in ns6, moz1, and ie6, but not tested beyond that.

Code: Select all

<!--

var 
    isNetscape=false;
    var cx=0;
    var cy=0;

function xpos() &#123;
   return cx;
&#125;

function ypos() &#123;
   return cy;
&#125;

function xy(x,y) &#123;
    cx = isNetscape ? x : window.event.x;
    cy= isNetscape ? y : window.event.y;
   window.status=cx+":"+cy;
&#125;

if (navigator.appName=="Netscape") &#123;
  isNetscape=true;
  document.captureEvents(Event.MOUSEMOVE);
&#125;

-->
HTH! =)

Posted: Tue Aug 13, 2002 4:45 pm
by daemorhedron
oops! you have to have onmousemove="xy(event.pageX,event.pageY);" in the <body> tag of your html doc. I am trying to find a way to avoid that, as I want the lib to be more stand alone. Any advice on that would be helpful (and document.onmousemove=xy in the script doesn't count! heh) .

Posted: Wed Aug 14, 2002 3:25 am
by fred
Thanks llimllib, great link. So the Click time problem is solved.

But the XY coords of the image is still a problem: :(

event.x event.y give the coordinates of the page not the image.

How can I find the Origin of the Image relative to the page.


Here's my code so far...

Code: Select all

downDate = new Date();
diff=0;
document.write("Hello" + diff + "World");

function down()
&#123;
	downDate = new Date();
&#125;

function up()
&#123;
	upDate = new Date();
   diff = upDate-downDate;
	alert("time:" + diff + " x:" + event.x + " y:" + event.y);
	//netscape: event.layerX
&#125;
I can "hack" code so the Forum doesn't have to write the complete solution for me.
Fred

Posted: Wed Aug 14, 2002 7:06 am
by llimllib
did you try the screenX and screenY properties too? they seemed right, but one of the problems with javascript is that each browser interperets the 'screen' differently - some include the nav bar, some don't, some include the scrollbar, some don't, so I don't think you're ever going to find an exact solution. Oh well, enough tangent for the morning.

:O :) :| :/ :) :P :o

Posted: Wed Aug 14, 2002 8:32 am
by fatalcure
hey, see if this is what u wanted:

Code: Select all

<script language="javascript">
function BrowserCheck() &#123;
	var b = navigator.appName
	if (b=="Netscape") this.b = "ns"
	else if (b=="Microsoft Internet Explorer") this.b = "ie"
	else this.b = b
	this.v = parseInt(navigator.appVersion)
	this.ns = (this.b=="ns" && this.v>=4)
	this.ns4 = (this.b=="ns" && this.v==4)
	this.ns5 = (this.b=="ns" && this.v==5)
	this.ie = (this.b=="ie" && this.v>=4)
	this.ie4 = (navigator.userAgent.indexOf('MSIE 4')>0)
	this.ie5 = (navigator.userAgent.indexOf('MSIE 5')>0)
	if (this.ie5) this.v = 5
	this.min = (this.ns||this.ie)
&#125;

// automatically create the "is" object
is = new BrowserCheck();

originX = 0;
originY= 0;

function GetXY(e) &#123;
	originX = (is.ns)? e.pageX : event.x+document.body.scrollLeft;
	originY = (is.ns)? e.pageY : event.y+document.body.scrollTop;
&#125;

down_time =  new Date(); 
up_time   =  new Date(); 

function up() &#123;
	up_time = new Date(); 
	difference= up_time - down_time;  // milliseconds! 
	alert("Time: "+difference+"ms\nX: "+originX+"\nY: "+originY);
&#125; 

function down(e) &#123; 
	down_time = new Date();
	GetXY(e);
&#125; 

if (is.ns) document.captureEvents(Event.MOUSEDOWN);

</script>

<img src="foo.gif" width="50" hight="50" onMouseUp="up()" onMouseDown="down()">
If you want the ACTUAL location of the image, and not the X-Y coordinates of WHERE ON THE IMAGE the mouse was clicked, this isnt the way to go, you need to mess around with the <DIV> for that, and using javascript you'll be able to get the X-Y coordinate of the IMAGE and not where the mouse was clicked on the image.

Play around with it, if you still need help w/ the div tag, post again.

:)