0

I have included the following code in my website as a game for young kids to try and locate the erased position of a golf ball.
Firefox runs the code perfectly and when the correct location is clicked the small golf ball pops up at that point. In IE however, although the position of the golf ball is falsely shown as much further to the right although it does pop up at the correct spot.
The page in question is located at:-
http://www.sandystephengolf.co.uk/juniors/?page_id=2643

Any help appreciated.

<script language="JavaScript">

function point_it(event){

pos_x_actual = 312
pos_y_actual = 168
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop;

pos_x_close = Math.abs(pos_x - pos_x_actual);
pos_y_close = Math.abs(pos_y - pos_y_actual);

document.getElementById("smallball").style.visibility = "hidden";

if (pos_x_close<5 && pos_y_close<5)
{
document.getElementById("smallball").style.visibility = "visible";
document.pointform2.form_z.value="Bingo - you have found it !!";
}
else if (pos_x_close<15 && pos_y_close<15)
{
document.pointform2.form_z.value="Very close";
}
else if (pos_x_close<30 && pos_y_close<30)
{
document.pointform2.form_z.value="Fairly Close";
}
else if (pos_x_close<100 && pos_y_close<100)
{
document.pointform2.form_z.value="Not even close";
}
else
{
document.pointform2.form_z.value="Miles away";
}
}
</script>

<body onload = "document.getElementById('smallball').style.visibility='hidden'">

<form name="pointform" method="post">
	<div id="pointer_div" onclick="point_it(event)" 
style = "background:url('http://www.sandystephengolf.co.uk/juniors/wp-content/uploads/2011/09/spottheballx.jpg') no-repeat; height:464px; width:628px">

		<div id="smallball" style="position:relative; top:156px; left:160px;">
<img src="http://www.sandystephengolf.co.uk/juniors/wp-content/uploads/2011/09/SmallGolfBall.png"  width="25" height="25" /></a>
		</div>
	</div>
	<div>
&nbsp;
<h3>You selection is:-</h3>

        </div>
</form>

<form name="pointform2" method="post">
<input type="text" name="form_z" size="30" />
</form>
</body>
</html>
3
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by Taywin
0

From just a quick look, "event.offsetX" (and Y) look like the x-browser problem. Google 'em. (Quirksmode is great for stuff like this.)

0

Oh and by the way, I tested your page and the ball wouldn't show up even though I clicked right on it. The message I saw is "Mile away" which is totally wrong. :P I am using FF version 7.0.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.