将不可见的 div 元素放置在照片上（onclick）(repl.it)

Question

元素放置的视觉效果我正在尝试制作一个“抚摸狗游戏”，我想在他的头上放一个 div，当你单击该 DIV 时，它会触发一个 JS 函数将照片更改为 .gif，然后再回到这里，这是我的代码JS：function pet_head(){    var image = getElementById("image");    image.src="DogPet.gif";    setTimeout(function(){      image.src="dog.jpeg";    }, 1000//length of gif   );};HTML：<div class="main">  <img id="image" src="dog.jpeg">  <div class="click></div></div>CSS：img{height:100%;width100%;position:absolute;}

Answer 1

如果您在图像中使用绝对值，它将始终位于其他所有内容之上。

看看下面，看看这是否是您想要的。

function pet_head(event) {

  /*var image = getElementById("image");

  image.src = "DogPet.gif";

  setTimeout(function() {

      image.src = "dog.jpeg";

  }, 1000 //length of gif

  );*/

  

  

  alert('changed');

};

document.getElementById('click').addEventListener('click', pet_head);

img {

  height: 100%;

  width: 100%;

}

div {

  /* This will center the image horizontally */

  display: flex;

  justify-content: center;

  position: absolute;

}

div#click {

  color: green;

  border: 2px solid red;

  top: 14%;

  height: 45%;

  width: 300px;

  position: absolute;

}

<div class="main">

  <div id="click"></div>

  <img id="image" src="https://i.insider.com/5df126b679d7570ad2044f3e?width=1100&format=jpeg&auto=webp" />

</div>

Answer 2

这是您的代码的工作版本。另请注意（除了删除代码拼写错误之外）我添加object-fit: cover到您的img，以便它在视口大小变化时保留纵横比。

function pet_head() {

   // var image = document.getElementById("image");

   alert("petting the dog");

   /* image.src = "DogPet.gif";

   setTimeout(function() {

       image.src = "dog.jpeg";

   

     }, 1000 //length of gif

   ); */

 };

 

 document.querySelector(".click").addEventListener("click", pet_head);

img {

  height: 100%;

  width: 100%;

  position: absolute;

  object-fit: cover;  

}

.click {

  position: absolute;

  left: 49%;

  top: 22px;

  height: 13vh;

  width: 17vw;

  cursor: pointer;

}

/* Presentational styles */

.click {

  background: yellow;

  opacity: .1;

}

html, body {

  margin: 0;

}

*, *::before, &::after { 

  box-sizing: border-box; 

}

<div class="main">

  <img id="image" src="https://i.stack.imgur.com/FthXz.jpg">

  <div class="click"></div>

</div>

jsFiddle