By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,636 Members | 1,190 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,636 IT Pros & Developers. It's quick & easy.

JS, MousePosition and storing -

P: 1
Hi,

I'll be honest I'm a newbie at all this and I'm need to get a small JS working as soon as possible - please can anybody help? I have a small insentive if needed ;)

What i need is a spot the ball page. An image on a HTML page that on mouse press stores to position of the crosshair into a X and Y box and works for most browers if not all of them.

Similiar to this:

************************************

[HTML]<!--
================================================== ==========
Capturing The Mouse Position in IE4-6 & NS4-6
(C) 2000 www.CodeLifter.com
Free for all users, but leave in this header
//-->

<html>
<body>

<!-- Part One:
Set up a form named "Show" with text fields named "MouseX"
and "MouseY". Note in the getMouseXY() function how fields
are addressed, thus: document.FormName.FieldName.value
//-->

<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>

<!-- Part Two:
Use JavaScript ver 1.2 so older browsers ignore the script.
The &lt;script> must be *after* the &lt;form> -- since the form
and fields must exist *prior* to being called in the script.
//-->

<script language="JavaScript1.2">
<!--
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. // Detect if the browser is IE or not.
  2. // If it is not IE, we assume that the browser is NS.
  3. var IE = document.all?true:false
  4.  
  5. // If NS -- that is, !IE -- then set up for mouse capture
  6. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  7.  
  8. // Set-up to use getMouseXY function onMouseMove
  9. document.onmousemove = getMouseXY;
  10.  
  11. // Temporary variables to hold mouse x-y pos.s
  12. var tempX = 0
  13. var tempY = 0
  14.  
  15. // Main function to retrieve mouse x-y pos.s
  16.  
  17. function getMouseXY(e) {
  18.   if (IE) { // grab the x-y pos.s if browser is IE
  19.     tempX = event.clientX + document.body.scrollLeft
  20.     tempY = event.clientY + document.body.scrollTop
  21.   } else {  // grab the x-y pos.s if browser is NS
  22.     tempX = e.pageX
  23.     tempY = e.pageY
  24.   }  
  25.   // catch possible negative values in NS4
  26.   if (tempX < 0){tempX = 0}
  27.   if (tempY < 0){tempY = 0}  
  28.   // show the position values in the form named Show
  29.   // in the text fields named MouseX and MouseY
  30.   document.Show.MouseX.value = tempX
  31.   document.Show.MouseY.value = tempY
  32.   return true
  33. }
  34.  
  35. //-->
  36.  
[HTML]</script>
</body>
</html>[/HTML]

************************

This code above is almost perfect apart from that I need to be able to put a crosshair on the screen and that then popultaes the X & Y boxes with the co-ordinates but the above code updates the box each time the mouse moves.

THIS IS A NICE TO HAVE BUT NOT MUST:
I would also like to be able to integrate the X & Y boxes so that the users can press a button ("play") and the variables of the X & Y boxes are stored in the shopping cart (Paypals or other) and the users can then play again.


I know this is probably asking alot but please can anybody help?

Many Thanks
Dan
Sep 20 '05 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
For the mouse position, see this link.
Oct 1 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.