<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Mouse and keyboard events example</title>
    <style>
      .thumb {
        width: 100px;
      }

      .zoom {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <h1>Mouse and keyboard events example</h1>

    <img class="thumb" src="pirate.jpg" tabindex="0" alt="A lego pirate figure with a cutlass, pistol, tricornered hat, peg leg, long hair and beard.">
    <script>
      const imgThumb = document.querySelector('.thumb');

      imgThumb.onmouseover = showImg;
      imgThumb.onmouseout = hideImg;

      imgThumb.onfocus = showImg;
      imgThumb.onblur = hideImg;

      function showImg() {
        const imgZoom = document.createElement('img');
        imgZoom.setAttribute('class','zoom');
        imgZoom.setAttribute('src',imgThumb.getAttribute('src'));

        let widthOffset = imgThumb.x + imgThumb.width + 10;
        imgZoom.style.left = widthOffset + 'px';
        let heightOffset = imgThumb.y;
        imgZoom.style.top = heightOffset + 'px';

        document.body.appendChild(imgZoom);
      }

      function hideImg() {
        const imgZoom = document.querySelector('.zoom');
        document.body.removeChild(imgZoom);
      }

    </script>
  </body>
</html>
