MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".hover-image").forEach(function (element) {
        let imgSrc = element.getAttribute("data-image");
        if (imgSrc) {
            let preview = document.createElement("img");
            preview.src = imgSrc;
            preview.style.position = "absolute";
            preview.style.width = "200px"; // Adjust as needed
            preview.style.display = "none";
            preview.style.border = "1px solid #ccc";
            preview.style.background = "white";
            preview.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.5)";
            document.body.appendChild(preview);

            element.addEventListener("mouseover", function (event) {
                preview.style.display = "block";
                preview.style.left = event.pageX + 10 + "px";
                preview.style.top = event.pageY + 10 + "px";
            });

            element.addEventListener("mousemove", function (event) {
                preview.style.left = event.pageX + 10 + "px";
                preview.style.top = event.pageY + 10 + "px";
            });

            element.addEventListener("mouseout", function () {
                preview.style.display = "none";
            });
        }
    });
});