image preview

// ==UserScript==
// @name        image preview
// @namespace   Violentmonkey Scripts
// @match       https://2ch.hk/2d/res/*
// @grant       none
// @version     1.0
// @author      kit
// ==/UserScript==


(() => {

  const xOffset = 20;
  const yOffset = 20;

  const preview = document.createElement("img")
  preview.style = `
    display: none;
    height: 50vh;
    position: absolute;
    z-index: 100
  `
  document.body.appendChild(preview)

  Array.prototype.forEach.call(document.getElementsByClassName("de-file-img"), (element) => {
    element.onmouseover = (event) => {
      if (event.target.tagName !== "IMG") {
        return
      }
      preview.src = event.target.src
      preview.style.display = "block"
      const previewWidth = preview.offsetWidth;
      const previewHeight = preview.offsetHeight;
      let x = event.pageX + xOffset;
      let y = event.pageY + yOffset;

      if ((x + previewWidth) > window.innerWidth) {
          x = Math.max(0, event.pageX - previewWidth - xOffset);
      }
      if ((y + previewHeight) > window.innerHeight) {
          y = Math.max(0, event.pageY - previewHeight - yOffset);
      }

      preview.style.left = x + 'px';
      preview.style.top = y + 'px';
    }

    element.onmouseout = (event) => {
      if (event.target.tagName !== "IMG") {
        return
      }
      preview.src = event.target.src
      preview.style.display = "none"
    }
  })

})();