PDA

View Full Version : I need a Spot the Ball Javascript

stevejmitchell
10-29-2002, 02:26 PM
Everyone, I apologise for this thread as I am not asking for help on a script but really after a complete working script as I haven't the first clue about Java programming.

I am basically after as the subject stated a Spot the Ball script that will have the following functionality:-

1) A "crosshair" will appear after a mouseclick on the picture where the contestant thinks the ball is located
2) The x and y coordinates appear during and after selection (in seperate boxes)
3) The contestant can change his mind simply by selecting a new spot, which will move the crosshair to the new location.
4) The x and y cordinates can be passed to a form.
5) The picture can be easily changed.

Again I apolgise for my "leeching" but your help would be greatly appreciated.

Don't treat me as a Java newbie, treat me more like a Java moron!

Thanks in advance for any help
beetle
10-29-2002, 02:55 PM
Well, what you ask for is no simple task, and probably outside the scope of this forum.

It sounds to me like you don't need help with programming, but instead want somebody to do this for you. That's not what CodingForums is about. If that is what you are really after, I suggest you hire someone to do this project for you.
stevejmitchell
10-29-2002, 03:02 PM
Sorry, I was unaware of the complexity of it, which is why I asked the question here first.

I have managed to do it in PHP very simply, in only a few lines, my only problem doing it with PHP is that it will not display the crosshair after you have clicked on the image.

If it ss big task, then I will indeed pay someone for their time, I was just hoping it would be a simple task for an experienced JS programmer, and thought this forum would be the best route.

(If anyone thinks it is a simple task, I'd still appreciate it:D )
beetle
10-29-2002, 03:29 PM
Well, placing the crosshair on the image isn't so bad, but I can't imagine that it's all you need for what sounds like a game. But, here'a a shot (from the hip) at an algorithm for placing your crosshair...

Assume you have picture and crosshair GIF (21x21)<html>
<head>
<title>Test</title>
<style type="text/css">
img#crosshair {
position: absolute;
display:none;
}
</style>

<script>
function placeCrosshair(e) {
var ch = document.getElementById('crosshair');
var pic = document.getElementById('picture');
ch.style.display = 'block';
ch.style.left = e.x - 11;
ch.style.top = e.y - 11;
document.coords.x.value = e.x - pic.offsetLeft;
document.coords.y.value = e.y - pic.offsetTop;
}
</script>
</head>

<body>
<img src="picture.jpg" width="500" height="500" id="picture" onClick="placeCrosshair(event)" />
<img src="crosshair.gif" width="21" height="21" id="crosshair" />
<form name="coords">
X: <input type="text" size="5" readonly="true" name="x" /><br />
Y: <input type="text" size="5" readonly="true" name="y" />
</form>
</body>
</html>
stevejmitchell
10-29-2002, 04:00 PM
Beetle, what can I say but you'da man!

Although you did make one little mistake, in the line
ch.style.top = e.y - 11;

it should be e.y + 11 (it was placing the crosshair above where the mouse was clicked) :P

I don't really need it to show the coordinate whilst moving the mouse around the picture, that was purely just a nice to have.

See Beetle, you under-estimated yourself. It was easy wasn't it? (for you, not me!)

I knew this forum was the place to come!

Cheers m8
Steve
beetle
10-29-2002, 04:36 PM
So that's all you need? You don't want to interact with the data in any way? I guess I just don't get what you are doing....

:D
stevejmitchell
10-29-2002, 04:44 PM
Basically, it is a competition site I am running and rather than pulling winning names out of a hat, I wanted an element of skill, so the contestant has to guess where the ball should be in a picture, and at the end of the competition, the nearest person to the correct coordinates wins.

So the only data I need is the x and y coordinates of where they think the ball is.
stevejmitchell
10-29-2002, 05:13 PM
Beetle,
A minor issue with the code above, if the window that the picture appears in is smaller than the picture (ie it has scrollbars) it messes up the placing of the crosshair and coordinates (it doesn't appear where you actually click it).

I can get around this by having it in a popup window and not allowing it to be resized, but would prefer to keep it in the same window if possible.

Any ideas?

Cheers
Steve