How can I place an image with the onclick() function from JS
Multi tool use
How can I place an image with the onclick() function from JS
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.
onclick()
edit: Note that the images can't be there to begin with. They have to be created on click.
<img>
Alright, thanks so much! I wasn't aware you could append stuff to the DOM and will look into that.
– Zanolon
Jun 30 at 19:36
@zonalon DOM manipulation is most of what JavaScript is. JavaScript is all about making pages interactive. Good luck :)
– www139
Jun 30 at 19:37
Not sure what you are trying to do but you could also have an
<img> whose visibility is set to false and during the onclick() you could make it visible.– thebrownkid
Jun 30 at 19:38
<img>
onclick()
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.)
– Zanolon
Jun 30 at 20:18
3 Answers
3
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>
This works perfectly. Thanks!
– Zanolon
Jun 30 at 20:18
<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
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.
While a good suggestion, that's not really what I'm trying to do. I'll update the question so it's more specific.
– Zanolon
Jun 30 at 19:40
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
It's simple enough once you get the hang of it. With your JavaScript, append a new
<img>tag to the DOM with source of your image. For gathering the mouse coordinates, look at this post (stackoverflow.com/a/23744762/3011082). I can code an answer but I encourage you to try again with this new information.– www139
Jun 30 at 19:35