I am trying to add a function to my site that when a user clicks in a random location an image appears in said location.
This is my current code all within my HTML, Im guessing I have to use xpos and ypos as their outputs in some sort of position tag?
<!DOCTYPE html>
<html onclick="showCoords(event)" >
<link rel="stylesheet" href="/style.css">
<body>
<h2 >Click this heading to get the x (horizontal) and y (vertical) coordinates of the mouse pointer when it was clicked.</h2>
<p><strong>Tip:</strong> Try to click different places in the heading.</p>
<img src="https://uploads-ssl.webflow.com/5eed5cc775d5b7fa27c3d7f5/5eef73e7ad8dd5e992850fea_Video-Thumbnail.png" alt="Girl in a jacket" >
<p id="demo"></p>
<p id="xpos"></p>
<p id="ypos"></p>
on
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
document.getElementById("xpos").innerHTML = x;
document.getElementById("ypos").innerHTML = y;
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire