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:-

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";
document.pointform2.form_z.value="Miles away";

<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>
<h3>You selection is:-</h3>


<form name="pointform2" method="post">
<input type="text" name="form_z" size="30" />

Recommended Answers

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

Jump to Post

All 2 Replies

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

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.21 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.