0

So I think I know how to do it. I need to get the coordinates of the cursor when the onclick() function is called. The thing is, I'm not sure how I can create a new image when I click. I'm sorry for not showing my attempts. They exist, but basically do nothing. Does anyone know how to do this? Thanks.

edit: Note that the images can't be there to begin with. They have to be created on click.

  • It's simple enough once you get the hang of it. With your JavaScript, append a new `` tag to the DOM with source of your image. For gathering the mouse coordinates, look at this post (https://stackoverflow.com/a/23744762/3011082). I can code an answer but I encourage you to try again with this new information. – www139 Jun 30 '18 at 19:35
  • Alright, thanks so much! I wasn't aware you could append stuff to the DOM and will look into that. –  Jun 30 '18 at 19:36
  • @zonalon DOM manipulation is most of what JavaScript is. JavaScript is all about making pages interactive. Good luck :) – www139 Jun 30 '18 at 19:37
  • Not sure what you are trying to do but you could also have an `` whose visibility is set to false and during the `onclick()` you could make it visible. – Salvatore Jun 30 '18 at 19:38
  • Lol. I suppose it is. I guess I never really thought of it specifically as appending things to the DOM. I've only used it for slideshows and whatnot. –  Jun 30 '18 at 19:39
  • @thebrownkid unfortunately, that won't work given what I'm trying to do, but thanks for the suggestion –  Jun 30 '18 at 19:39
  • I don't see why the image can't exist first. It seems much easier to clone an invisible and unnoticeable image than to create a new one. Can you clarify? –  Jun 30 '18 at 20:15
  • 1
    Oh, that is possible. I thought he was suggesting to have an image on the screen and make it visible on click. The reason that wouldn't work is because you need to have multiple images at random locations. (Random being wherever the use clicks.) –  Jun 30 '18 at 20:18
  • Just an FYI — don't ask for upvotes. Your question was ok to begin with, but earned a downvote just because of that. – jhpratt Jun 30 '18 at 22:19
  • I was joking, he asked me to confirm his answer. It appears he deleted his comment and I got baited. Sorry about that. Notice how I said "no problem" it's from when he asked me to confirm his answer –  Jun 30 '18 at 22:21

3 Answers3

0

Use your CSS to set the default to hide the image property and use the click function to alter the CSS to show instead of hide.

BenjiScarecrow
  • 1
  • 1
    While a good suggestion, that's not really what I'm trying to do. I'll update the question so it's more specific. –  Jun 30 '18 at 19:40
0
<body style="position: relative">

<script>
var img = null;

function placeImage(e) {

if(img == null){
    img = document.createElement("IMG");
    img.setAttribute("src", "img.png");
    img.setAttribute("width", "40");
    img.setAttribute("height", "40");
    img.style.position = "absolute";
    document.body.appendChild(img);
  }
  img.style.left = (e.clientX - (img.width / 2)) + "px";
  img.style.top = (e.clientY - (img.height / 2)) + "px";
}

document.addEventListener("click", placeImage);
</script>
</body>

This will place the center of the image in the point where you click.

EDIT: I changed the code to create an image as a DOM Object

Ayoub Laazazi
  • 540
  • 7
  • 15
0

Based on @AyoubLaazazi 's answer, try this:

img = document.getElementById("img")

counter = 0

function placeImage(e) {
  imgc = $("#img").clone().appendTo("body")[0]
  imgc.style.visibility = "visible"
  imgc.style.left = (e.clientX - (img.width / 2)) + "px";
  imgc.style.top = (e.clientY - (img.height / 2)) + "px";
  counter++
}

document.addEventListener("click", placeImage)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img src="https://d21ii91i3y6o6h.cloudfront.net/gallery_images/from_proof/8007/large/1441565237/stack-overflow-logo.png" style="visibility: hidden; position: absolute" id="img"/>
</body>