Image pop up

by DLungaro

HTML

<script src="imagePopup.js" type="text/javascript"></script>

<html>
  <h1>Image pop up!</h1>
  <body>
    <div>
      <button
        id="imageSmall"
        onmouseover="showImage('imageSmall','https://picsum.photos/100')"
        onmouseout="hideImage('imageSmall')"
        onclick="tellToHover()"
      >
        Hover for small image
      </button>
      <button
        id="imageMedium"
        onmouseover="showImage('imageMedium','https://picsum.photos/200')"
        onmouseout="hideImage('imageMedium')"
        onclick="tellToHover()"
      >
        Hover for medium image
      </button>
      <button
        id="imageLarge"
        onmouseover="showImage('imageLarge','https://picsum.photos/300')"
        onmouseout="hideImage('imageLarge')"
        onclick="tellToHover()"
      >
        Hover for large image
      </button>
    </div>
  </body>
</html>

JavaScript

function showImage(elemId, imgSrc) {
  console.log("Mouse is over text");
  console.log("\tElemId:" + elemId + " Image Source:" + imgSrc);
  const elem = document.getElementById(elemId);
  const popImage = new Image();
  popImage.src = imgSrc;
  popImage.style.position = "absolute";
  popImage.style.zIndex = "1";
  elem.appendChild(popImage);
}
function hideImage(elemId) {
  console.log("Mouse is off text");
  console.log("\tElemId:" + elemId);
  const elem = document.getElementById(elemId);
  while (elem.childElementCount > 0) {
    elem.removeChild(elem.lastChild);
  }
}

function tellToHover() {
  alert("Hover over the button for the image to appear, no need to press it!");
}