Dont know if anyone runs any competitions on their sites but i have managed to create a spot the ball (that works in both IE and firefox).

It should work as it is but you will need 2 images.

1, a suitable picture what you can use as your "spot the"
2, a crosshairs image perhaps or one to your liking to be used as an indicator for where you think the ball is.

<style type="text/css">
#crosshair { position: absolute; display:none;}
</style>

<script language="JavaScript1.2">

var tempX = 0;
var tempY = 0;

var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);

function Crosshair(e) {
   
	if (IE) { // IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	}
	else {  //NS
		tempX = e.pageX;
		tempY = e.pageY;
	}
	if (tempX < 0){tempX = 0;}
	if (tempY < 0){tempY = 0;}

	document.write(tempY + tempX);

	document.Show.MouseX.value = tempX;
	document.Show.MouseY.value = tempY;
	
	var ch = document.getElementById('crosshair');
	
	ch.style.display = 'block';
	IE ?  move(ch,e.x,e.y) : move(ch,e.pageX,e.pageY); 
}

function move(what,x,y){
	
	if(!IE){
        tmpX = (x - 17)  + "px";  		
		tmpY = (y - 118) + "px";
	}else{
	  tmpX = (x - 6);
	  tmpY = (y - 6);
	}
	what.style.left = tmpX;
	what.style.top  = tmpY;
}
</script>

<!-- BEGIN: body -->

<img src="spot_the_ball.jpg" id="picture" onclick="Crosshair(event)">
<img src="crosshair.gif" id="crosshair" />

<form method="POST" name="Show">
<input type="hidden" name="MouseY" value="0" size="4">
<input type="hidden" name="MouseX" value="0" size="4">
<input type="Submit" value="Go"  />
</form>

Im sure you can capture and deal with the post data yourselves.

Hope some of you use it, not fussed if you dont, it's open source and there be no fee.

Ibbo

Do you have a working example already set up? I'm not quite sure what spot the ball is.

I will have when it goes live (though when that is is not down to me).

Spot the ball is the classic old game of guessing where a ball on an image.

In the case of football it maybe someplace near the goal. For American football it may be in the air and for basketball it could be near the basket and my favorate Rugby has gorra be over the try line.

You pretty much click on the image where you think the ball is. If your happy with where it puts the cross then you submit it.

The person with coords nearest to the actual ball poition (which is not shown on the image) wins the competition.

Ibbo

Hi,

I'm trying to find out how to create an easy spot the ball for an internal competition in our office, and I came across your post.

Being relatively new to web designing, how easy is it to use your code, and....what would I do with it?

Many Thanks in advance, hope you can help me.

Gareth

You can view an example here http://www.nationalclubgolfer.com/coords/.

Its been sat there for a while as I cannot manage to get IE and firefox to represent the same coords when a click occurs.

So it can still be used so long as you have 2 sets of coords. It may well be that other browsers also give their own coords thus making it realy worthless as an online comp or something. But for internal stuff where you can guarantee the browser used Iw ould say its worth a go.

The code above works. Just copy and paste it into a html doc and edit teh img tags to point at your images.

Ibbo

Hi Ibbo

It looks like you might be able to help me. That is if you are looking for a nice little project at the moment

I would like to integrate a script like this just before my shopping cart to enable me to run a prize competition. I am not very technically inclined and know just about the basics of html. I am however prepared to pay for your services. Please let me know if you are interested by return post. I am also based in London UK so I can give you a call at a convenient time.

Many thanks.

You do realize you just woke up a three-year old thread, right?

Yes

Am I clutching straws?

no but you are better off starting a new thread in the market place.