get coordinates and place gfx (CSS)

In essence I'm trying the grab the pixel coordinates from an onClick event (over a predefined image), and use these coordinates to place a small graphic.

The main problem is dynamically generating the DIV tags to insert an extra graphic along with the appropriate LEFT and TOP styles - LEFT and top being the pixel coords grabbed from clicking the 'main' image.

phew!

Can anyone please help.

Cheers

Do you need to dynamically create a DIV or can you already have the DIV, but have it's visibility property be 'hidden', then when you want it displayed, move it's position dynamically and change the its visibility state dynamically?

Thanks for you reply Pieux!

Dynamically creating the DIV would be ideal as the number of 'clicks' to the image will not be know. By doing this we can then display this small graphic on top at each click without being restricted to a finite number.

Any suggestions?

I think I understand what you are trying to do, but I fail to see where you get an advantage in dynamically creating the DIV as opposed to already having it there. Do you want to have one image for each individual click? Could you provide a specific example? There might be a different (possibly better) way of accomplishing your ultimate goal.

Yeh, the idea is a user will click an image, and based on that click a small image of a cross will be placed on top.
Current working is that a string of pixel coordinates are collected anyway, which I thought could be used to populate the LEFT and TOP values the style...or something of that effect.

This is quite new to me, so I could well be looking at a very difficult methodology.

p.s. the image used is the same for each point

How about if you create, say, 200 <div>s, each with incremental names. Then, as the user clicks, you change the position of a different <div> (incrementing through your list up to 200). Once you reach the 200th <div>, you start at number 1 again. This is a technique used by people that develop first-person shooter type games in order to put a cap on how much memory is consumed with things like bullet holes. If you don't do this, you will probably risk running out of memory and not having any way of freeing it up, short of leaving that page or closing the browser (which will in effect be leaving the page).

it isn't super clear to me: do you need multiple crosses on the screen, or do you want the same one to appear each time?

if only one, you could set a timer on it, so it hides itself again after 3 seconds, and then on the next click, either shows itself again, or if it hasn't yet vanished, it could just reset the timer.

just a thought. i'm a big fan of timers in general.

pieux is right tho, i think: don't bother dynamically writing out the divs, just more and show them as you need them. should save you a little headache.

rgds,
darwin

Thanks for your help guys, I have taken the approach suggested by Pieux of incrementally naming several hidden DIVs, and moving them based on a users' onClick event. Works very well.

Thanks again