I start with a blank page, and the user is supposed to click anywhere on the page to make an image pop up. I'm trying to display an image at the exact coordinates of where a user clicks within a page. I am able to get an image to pop up in the corner whenever/wherever the user clicks. I am also able to gather the x and y coordinates of where the mouse clicks within a page, but in making those coordinates the coordinates of the image, I'm having trouble. With the code I have below, when the user clicks anywhere within the window, the image of a snowball appears in the upper left hand corner, and the x coordinates of the click are displayed. (Clicking more changes the x coordinate displayed with each click). My question is, how do I get the snowball to appear at the click coordinates?
<head>
<script>
document.onclick = userClicked;
function userClicked() {
var x = event.clientX;
var y = event.clientY;
document.getElementById("xCoord").innerHTML=x;
document.getElementById("snowballAppear").style.display = '';
}
</script>
<div class "container">
<div class "picture">
<img alt="snowballAppear" id="snowballAppear" style="display: none" src=".png/revision/latest?cb=20130412122815"/>
</div>
</div>
</head>
I start with a blank page, and the user is supposed to click anywhere on the page to make an image pop up. I'm trying to display an image at the exact coordinates of where a user clicks within a page. I am able to get an image to pop up in the corner whenever/wherever the user clicks. I am also able to gather the x and y coordinates of where the mouse clicks within a page, but in making those coordinates the coordinates of the image, I'm having trouble. With the code I have below, when the user clicks anywhere within the window, the image of a snowball appears in the upper left hand corner, and the x coordinates of the click are displayed. (Clicking more changes the x coordinate displayed with each click). My question is, how do I get the snowball to appear at the click coordinates?
<head>
<script>
document.onclick = userClicked;
function userClicked() {
var x = event.clientX;
var y = event.clientY;
document.getElementById("xCoord").innerHTML=x;
document.getElementById("snowballAppear").style.display = '';
}
</script>
<div class "container">
<div class "picture">
<img alt="snowballAppear" id="snowballAppear" style="display: none" src="http://vignette3.wikia.nocookie/pottermore/images/9/99/Snowball-lrg.png/revision/latest?cb=20130412122815"/>
</div>
</div>
</head>
-
May want to use jQuery UI. Click the
view sourcelink. Of course, you should use external JavaScript, unlike the example. External JavaScript will allow the Client to cache your script, making load times faster next time they visit your site, assuming they don't clear their cache. – StackSlave Commented Nov 19, 2015 at 23:14 -
1
You properly don't want to put your
<div>s in<head>? – Andreas Louv Commented Nov 19, 2015 at 23:17
2 Answers
Reset to default 1You can use the CSS element "left" for X and "top" for Y. Make sure to have a "position: absolute;" css style in the image.
Basically, in code:
function userClicked() {
var x = event.clientX;
var y = event.clientY;
var snowball = document.getElementById("snowballAppear");
snowball.style.display = '';
snowball.style.position = 'absolute';
snowball.style.left = x + 'px';
snowball.style.top = y + 'px';
}
JSFiddle: https://jsfiddle/mxq629ng/
You might want to subtract half the height / width of the image from the X and Y to center it around the mouse.
EDIT: Addition as some ments came back; you might want to add the "event" as a passable argument in the userClicked function. The click event will forward that "event" variable into your function. This will make it work in many major browsers (somehow it works in V8). Check this Fiddle and it should work in most major browsers; https://jsfiddle/mxq629ng/1/
You need to position the img element:
Dont't forget to pass in the event to your function
function userClicked(event) {
var x = event.clientX;
var y = event.clientY;
document.getElementById("xCoord").innerHTML=x;
document.getElementById("snowballAppear").style.display = '';
// fixed position - The element is positioned relative to the browser window
document.getElementById("snowballAppear").style.position = "fixed";
// px from top of browser
document.getElementById("snowballAppear").style.top = y + "px";
// px from left of browser
document.getElementById("snowballAppear").style.left = x + "px";
}