Как разместить изображение с помощью функции onclick () из JS - PullRequest
Новая
       0

Как разместить изображение с помощью функции onclick () из JS

0 голосов
/ 30 июня 2018

Так что я думаю, что знаю, как это сделать. Мне нужно получить координаты курсора при вызове функции onclick(). Дело в том, что я не уверен, как я могу создать новое изображение при нажатии. Я извиняюсь за то, что не показываю мои попытки. Они существуют, но в основном ничего не делают. Кто-нибудь знает как это сделать? Благодаря.

edit: обратите внимание, что изображения не могут быть там с самого начала. Они должны быть созданы по клику.

Ответы [ 3 ]

0 голосов
/ 30 июня 2018 
<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>

Это поместит центр изображения в точку, где вы щелкнете.

РЕДАКТИРОВАТЬ: я изменил код для создания изображения в виде объекта DOM

0 голосов
/ 30 июня 2018

Основываясь на ответе @AyoubLaazazi, попробуйте следующее: 

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>
0 голосов
/ 30 июня 2018

Используйте свой CSS, чтобы установить значение по умолчанию, чтобы скрыть свойство изображения, и использовать функцию щелчка, чтобы изменить CSS, чтобы показать вместо скрытия.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...