Javascript Click On Page Puts Image

[Tanner8]

Hey, I am trying to make a script so that when you go to the page and click anywhere (even on images) it will put an image right at your mouse point. I am going to have the little image as a checkmark but how would I go about doing that? I know how to go into the script onclick but i am not sure how to put the image right were you clicked. I was thinking clickLoc() but I am unsure on how to use it and can't find any decent examples online.

Thanks

[Alsvha]

Does the page have any other content then the image, because if it does, it will be tricky to do - but not impossible.

However, basically what you need to do is to read the X and Y coordinate of the mouse-click event, and then "place" the image at that location by using the DOM tree by using the position options there, but this is where the page design and content comes into play. So I think you'll have to provide more information before people can help you like this.

Otherwise, try starting with capturing the mouse click event and subtract the X and Y coordinates - that would be the first step.

[Tanner8]

This is going to be with a few images, there shouldn't be any text. I want to be able to click multiple times also without the original disappearing or anything. Thanks

[PeejAvery]

This is just a simple combination of two parts.

• Get mouse coordinates
• Create image element with those coordinates

Get mouse coordinates

if (document.all) {
  xpos = event.clientX + document.body.scrollLeft;
  ypos = event.clientY + document.body.scrollTop;
}
else {
  xpos = e.pageX;
  ypos = e.pageY;
}

Create image element with those coordinates

var theBody = document.getElementsByTagName('body').item(0);

var theImage = document.createElement('img');
theImage.src = 'path/to/check.png';
theImage.style.position = 'absolute';
theImage.style.left = xpos + 'px';
theImage.style.top = ypos + 'px';
theBody.appendChild(theImage);

[Tanner8]

Thanks, works great in IE, I have been trying EVERYTHING and can't get it working in FF. I googled until my eyes bled and it seems to be a very common problem but I can't find a fix that works for this.

[PeejAvery]

There should be no reason why if won't work in Firefox. What does your Error Console say? Did you think of debugging?

[Tanner8]

I didn't get any errors (because I don't know where they would show) but I tested a few things. I tried an alert in the if and else statements and it comes up in the else. Then I put the alert BELOW,

xpos = e.pageX;
ypos = e.pageY;

and it did not come up. I guess the error is somewhere there then but I can't figure out how to fix it.