web app to record the x,y cords where user clicks mouse?
29 October 2004, 04:10 PM
#1
Scooby Regular
Thread Starter
Join Date: Jun 2000
Posts: 3,783
Likes: 0
Received 0 Likes
on
0 Posts
web app to record the x,y cords where user clicks mouse?
any comments welcome about which would be the simplest web programming language to implement this
user moves mouse over an image, and clicks - computer records the x,y cords of that point and dumps info in a database
thought about Flash & CF - anything else people could mention ?
user moves mouse over an image, and clicks - computer records the x,y cords of that point and dumps info in a database
thought about Flash & CF - anything else people could mention ?
29 October 2004, 04:19 PM
#2
Scooby Regular
Join Date: Sep 1999
Location: Swindon, Wiltshire Xbox Gamertag: Gutgouger
Posts: 6,956
Likes: 0
Received 0 Likes
on
0 Posts
You can track the coordinates of the mouse pointer and mouse clicks just using javascript. You need to be a bit clever because mozilla and ie browsers handle the coordinate management differently, but it is possible. All you need to do is to get the coordinates of the mouse pointer, get the coordinates of the image, and the do a bit of arithmatic to work out the position within the image.
It is possible (I did it a while ago) without resorting to any plugins etc (think it'll only work with the more modern browsers though)....
Otherwise, just use flash...
It is possible (I did it a while ago) without resorting to any plugins etc (think it'll only work with the more modern browsers though)....
Otherwise, just use flash...
29 October 2004, 08:49 PM
#4
02 November 2004, 10:24 AM
#7
Scooby Regular
Join Date: Sep 1999
Location: Swindon, Wiltshire Xbox Gamertag: Gutgouger
Posts: 6,956
Likes: 0
Received 0 Likes
on
0 Posts
Off the top of my head, how about something like this....
<html>
<head>
<script>
// Capture web browser information
function WebBrowser()
{
this.isMSIE = false;
this.isOpera = false;
this.isMozilla = false;
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Opera") >= 0)
this.isOpera = true;
else if (userAgent.indexOf("Netscape6/") >= 0)
this.isMozilla = true;
else if (userAgent.indexOf("Gecko") >= 0)
this.isMozilla = true;
else if (userAgent.indexOf("MSIE") >= 0)
this.isMSIE = true;
}
var theBrowser = new WebBrowser();
// Place the image where you want it and remove the hidden attribute
function spritePosition(id,x,y)
{
var theDiv = document.getElementById(id);
if (theDiv)
{
if (theBrowser.isMozilla)
{
theDiv.style.left = x;
theDiv.style.top = y;
}
else if (theBrowser.isMSIE)
{
theDiv.style.pixelLeft = x;
theDiv.style.pixelTop = y;
}
theDiv.display="block";
}
}
</script>
</head>
<body>
<div id="sprite1" style="position:absolute;left:100px;top:20px;"><im g src="sprite1.gif" width="10" height="10" border="0" alt="sprite1"/></div>
<div id="sprite2" style="position:absolute;left:130px;top:20px;"><im g src="sprite2.gif" width="10" height="10" border="0" alt="sprite2"/></div>
<a href="javascript:spritePosition('sprite1', 50, 120);">Move sprite 1</a><br/>
<a href="javascript:spritePosition('sprite2', 50, 150);">Move sprite 2</a><br/>
</body>
</html>
<html>
<head>
<script>
// Capture web browser information
function WebBrowser()
{
this.isMSIE = false;
this.isOpera = false;
this.isMozilla = false;
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Opera") >= 0)
this.isOpera = true;
else if (userAgent.indexOf("Netscape6/") >= 0)
this.isMozilla = true;
else if (userAgent.indexOf("Gecko") >= 0)
this.isMozilla = true;
else if (userAgent.indexOf("MSIE") >= 0)
this.isMSIE = true;
}
var theBrowser = new WebBrowser();
// Place the image where you want it and remove the hidden attribute
function spritePosition(id,x,y)
{
var theDiv = document.getElementById(id);
if (theDiv)
{
if (theBrowser.isMozilla)
{
theDiv.style.left = x;
theDiv.style.top = y;
}
else if (theBrowser.isMSIE)
{
theDiv.style.pixelLeft = x;
theDiv.style.pixelTop = y;
}
theDiv.display="block";
}
}
</script>
</head>
<body>
<div id="sprite1" style="position:absolute;left:100px;top:20px;"><im g src="sprite1.gif" width="10" height="10" border="0" alt="sprite1"/></div>
<div id="sprite2" style="position:absolute;left:130px;top:20px;"><im g src="sprite2.gif" width="10" height="10" border="0" alt="sprite2"/></div>
<a href="javascript:spritePosition('sprite1', 50, 120);">Move sprite 1</a><br/>
<a href="javascript:spritePosition('sprite2', 50, 150);">Move sprite 2</a><br/>
</body>
</html>
Trending Topics
Thread
Thread Starter
Forum
Replies
Last Post
shorty87
Full Cars Breaking For Spares
19
22 December 2015 11:59 AM
Pro-Line Motorsport
Car Parts For Sale
2
29 September 2015 07:36 PM
