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>
<h3>You selection is:-</h3>
</div>
</form>
<form name="pointform2" method="post">
<input type="text" name="form_z" size="30" />
</form>
</body>
</html>