IMG форма с функцией наложения

Question

У меня есть картинка, которая должна открывать оверлей по клику.

Оверлей также должен быть закрыт щелчком.

У меня была почти рабочая версия с кнопкой, но картинка была смещена.

Я попробовал функцию формы и это выглядит намного лучше, но я вижу только мерцание наложения, прежде чем оно исчезнет. Так что функция onclick больше не работает.

function on() {
  document.getElementById("overGeld").style.display = "block";
}

function off() {
  document.getElementById("overGeld").style.display = "none";
}

css: #overGeld {
  display: none;
  width: 380px;
  height: 350px;
  background-color: aliceblue;
  position: absolute;
  border: none;
  margin-left: -50px;
  padding: 10px;
  line-height: 130%;
}

<div id="spendMö">
  <form class="bildbt" onclick="on()">
    <input type="image" class="bilder" id="geld" src="hund-geld.jpg">
  </form>
  <div id="overGeld" onclick="off()">
    <a>.....</a>
  </div>

Answer 1

input type="image" - это кнопка отправки -

вам нужно использовать <img или <button type="button" или ссылку с protectDefault

document.getElementById("spendMö").addEventListener("click", function(e) {
  let imgStyle = document.getElementById("overGeld").style;
  imgStyle.display = imgStyle.display === "block" ? "none" : "block";
})

#overGeld {
  display: none;
  width: 380px;
  height: 350px;
  top: 100px;
  background-color: aliceblue;
  position: absolute;
  border: none;
  margin-left: -50px;
  padding: 10px;
  line-height: 130%;
}

<div id="spendMö">
  <img class="bilder" id="geld" src="https://previews.123rf.com/images/helga1981/helga19811605/helga1981160500142/56492101-hund-in-den-gl%C3%A4sern-h%C3%A4lt-in-seine-pfoten-eine-menge-geld-isoliert-auf-wei%C3%9Fem-hintergrund.jpg">
  <div id="overGeld">
    Over Geld
  </div>
</div>