[mirzao]

How can I capture mouse click position on the image, and draw a little arrow on the image?

[TwoD]

I think the easiest way to do this is to catch the onclick event from the image and then place an image of the arrow on top of it. (A gif with transparent background)

Code:

function placeImage(event){
 var X=event.clientX,Y=event.clientY 
 var img=document.getElementById('id_of_arrow_img')
 img.style.left=X
 img.style.top=Y
}

You might need to change to a different event.property if the position isn't correct. I haven't tested this script and I forgot which property works best.