form / graphic / email help

[rg2003]

ok..need the following:

i have two images about 100 x 100

need to allow users to click on any area of the images
and those clicks hafta show up as tick marks on the images,AND be reported into the form-to-email the images are in.

how do I do this?

[AdamGundry]

Do you need the tick to appear exactly where the click was, or simply if it was on the image? If the latter is true, you can create a second image, with a tick, then use an img tag like this:

<img src="image1.gif" onclick="this.src = 'image1tick.gif'">

Again, if you don't need to know the location in the form-to-email, use a hidden field like this:

<img src="image1.gif" onclick="this.src = 'image1tick.gif'; image1tick.value = 'true'">
<input type="hidden" name="image1tick" value="false">

If you do need to know exact cursor positions, you will need to do something more complex using event.x and event.y in a function event handler for onClick, which are assigned to two hidden inputs.

Hope this helps

Adam

[rg2003]

unfortunately, yes, need the exact locations both showing on the page, and submitted in the form

[..::Bro::..]

One you can "Slice" the image into smaller images so that
when the user clicks on the image only that specific "area"
changes!

2) You can create an "Image Map" that determines a specific
point on your image!

I will later post how to do both, sorry it's 1am and i'm going
to bed...


Till then go into "Graphics" forum and post the same
message there....

Cheers,

..:: Bro ::..

[AdamGundry]

Try something like this...

<img src="image1.gif" onclick="ClickedImage()">
<img src="tick.gif" style="display: none" name="tick" id="tick">

<input type="hidden" name="image1x" value="">
<input type="hidden" name="image1y" value="">

<script type="text/javascript">
function ClickedImage(){
tick.style.posLeft = window.event.x;
tick.style.posTop = window.event.y;
tick.style.display = 'inline';

image1x.value = window.event.x;
image1y.value = window.event.y;
}
</script>


This should show the tick when the image is clicked on in the correct location, and store the position in hidden fields so when the form is submitted the position will be given.

Adam