1
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.FormNa me.FieldName.va lue
//-->
<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 <script> must be *after* the <form> -- since the form
and fields must exist *prior* to being called in the script.
//-->
<script language="JavaS cript1.2">
<!--
[/HTML]
Expand|Select|Wrap|Line Numbers
- // Detect if the browser is IE or not.
- // If it is not IE, we assume that the browser is NS.
- var IE = document.all?true:false
- // If NS -- that is, !IE -- then set up for mouse capture
- if (!IE) document.captureEvents(Event.MOUSEMOVE)
- // Set-up to use getMouseXY function onMouseMove
- document.onmousemove = getMouseXY;
- // Temporary variables to hold mouse x-y pos.s
- var tempX = 0
- var tempY = 0
- // Main function to retrieve mouse x-y pos.s
- function getMouseXY(e) {
- if (IE) { // grab the x-y pos.s if browser is IE
- tempX = event.clientX + document.body.scrollLeft
- tempY = event.clientY + document.body.scrollTop
- } else { // grab the x-y pos.s if browser is NS
- tempX = e.pageX
- tempY = e.pageY
- }
- // catch possible negative values in NS4
- if (tempX < 0){tempX = 0}
- if (tempY < 0){tempY = 0}
- // show the position values in the form named Show
- // in the text fields named MouseX and MouseY
- document.Show.MouseX.value = tempX
- document.Show.MouseY.value = tempY
- return true
- }
- //-->
</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
