JavaScript - Xy Coords And So Much More

I need a javascript that will print out the X and Y of the mouse on the screen as I move the mouse and keep up to date. The X and the Y must also be stored in a variable.

(Trying to increase my knowledge of javascript so that I can make my web sites better and my experiments are all in making games)

Help!

I am trying to get a ball within an image and then send the x, y coordinates to paypal. I'm almost there but the BALL.GIF wont go into the picture. Can anyone help me do this? The second script (getting the coordinates works perfectly.... I just cant figure out how to get the ball in the picture!!)

Here's my code:

[code]
<script language="JavaScript">

function placeCrosshair(e) {
var ch = document.getElementById('ball');
var pic = document.getElementById('myImg');
ch.style.left = e.x + 11;
ch.style.top = e.y + 11;

</script>

<script language="JavaScript">

javascript&colonself.resizeTo(900,screen.availHeight);self.moveTo(40,0);

var d = document;

//Get the img X and Y positions with an onMouseOver event

function getCoor(imgId) {
x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("clickImage").offsetLeft;
y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("clickImage").offsetTop;

document.mypaypalform.item_name.value = "Ball position: x=" + x + "\ny=" + y;

//this section writes out the coordinates on the page.

var data = "<br><h3>Your selected ball position is: x =" + x + " and y =" + y + "</h3>";
if (mypaypalform.layers) {
mypaypalform.layers.cust.document.write(data);
mypaypalform.layers.cust.document.close();
}

else {
if (mypaypalform.all) {
cust.innerHTML = data;
}
}
}

</script>

<p></p>

<a href="#" onClick="placeCrosshair(event)>
<img src="ball.jpg" width="21" height="21" id="ball" />


<a href="#" onclick="getCoor('myImg')">
<img src="picture.jpg" alt="" border="0" height="600" width="850" name="myImg" ismap></a>


<br><br>

<h3>Click on the payment button to enter.</h3>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" name="mypaypalform">
<!-- Placeholder for dynamic form contents -->
<span name=cust id=cust style="position:relative;"></span>

<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="buy@buy.co.uk">
<input type="hidden" name="item_name" value="Game - ">
<input type="hidden" name="item_number" " value="1">
<input type="hidden" name="amount" value="0.50">
<input type="hidden" name="no_shipping" value="0">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-BuyNowBF">

<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_paynow_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">

<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Thank you
Al

i have a problem with this code when working in IE
it gives me 0,0 coords when i use iframe tag and -1,-1 when i use div tag but gives correct coords when using firefox


Code:

unction GetRealOffset(id)
{
	
	var elem = document.getElementById(id);
	var leftOffset = elem.offsetLeft;
	var topOffset = elem.offsetTop;
	var parent = elem.offsetParent;
	
        while(parent != document.body) 
	{
             leftOffset += parent.offsetLeft;
	     topOffset += parent.offsetTop;
            parent = parent.offsetParent;
	}
        var Offsets = new Object();
	Offsets.top = topOffset;
	Offsets.left = leftOffset;
	
        alert(Offsets.top + " " +Offsets.left)
	return Offsets;
}

i tried this code as well
Code:

function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;
}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}

but both r giving same value in IE
can u help me plz
thx in advance
Edit/Delete Message

Hello,

I am not the best JS programmer, but I was wondering...

Is there a way to do this:

HTML Document /w/ 2 frames, A & B.

When you click a button in frame A:
"Click" (X,Y coords) in frame B.

If that's not possible in JS, please let me know what language I need.

- Waffles