Anonymous 08/27/2025 (Wed) 00:45 No.1268 del
>>1261
I just whipped up a userscript that implements a way to display images on hover. It doesn't do videos yet. This is a quick proof-of-concept.
// ==UserScript==
// @name        endchan.org media on hover
// @namespace   Violentmonkey Scripts
// @match       https://endchan.org/*/res/*.html*
// @grant       none
// @version     1.0
// @author      -
// @description Display media by hovering over it.
// ==/UserScript==

function createHoverMediaContainer() {
  const div = document.createElement("div")
  div.id = "hoverMedia"
  const img = document.createElement("img")
  div.appendChild(img)
  return div
}

function displayOnHover(ev) {
  const target = ev.target
  const parent = target.parentElement
  const hover = document.getElementById("hoverMedia")
  const hoverImg = hover.querySelector("img")

  //console.log(target, parent)
  if (target.tagName == "IMG" && parent.classList.contains("imgLink")) {
    hoverImg.src = parent.href
    hover.classList.add("enabled")
  }
}

function hideOnLeave(ev) {
  const target = ev.target
  const parent = target.parentElement
  const hover = document.getElementById("hoverMedia")
  const hoverImg = hover.querySelector("img")

  if (target.tagName == "IMG" && parent.classList.contains("imgLink")) {
    hoverImg.src = parent.href
    hover.classList.remove("enabled")
  }
}

const css = `
#hoverMedia {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
}

#hoverMedia.enabled {
  display: block;
}

#hoverMedia img {
  max-width: 100vw;
  max-height: 100vh;
}
`

// Add CSS
let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(css));
document.head.appendChild(style);

// setup container for image
document.body.append(createHoverMediaContainer())

// setup event handlers
document.addEventListener('mouseover', displayOnHover)
document.addEventListener('mouseout', hideOnLeave)