Поместите невидимый элемент 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

Вот рабочая версия вашего кода. Также обратите внимание, что (помимо удаления опечаток кода) я добавил 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

Answer 2

Если вы используете абсолютное на изображении, оно всегда будет на вершине всего остального.

Посмотрите ниже и посмотрите, действительно ли это то, что вы ищете.

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>