MediaWiki:Common.js: Difference between revisions

From Vanilla Plus
Jump to navigation Jump to search
Created page with "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"; //..."
 
No edit summary
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
/* Any JavaScript here will be loaded for all users on every page load. */
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener("DOMContentLoaded", function () {
     document.querySelectorAll(".hover-image").forEach(function (element) {
     document.querySelectorAll(".image-hover").forEach(function (link) {
         let imgSrc = element.getAttribute("data-image");
         link.addEventListener("mouseover", function () {
        if (imgSrc) {
             let img = link.querySelector("img");
             let preview = document.createElement("img");
             if (img) {
             preview.src = imgSrc;
                img.style.display = "block";
            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) {
        link.addEventListener("mouseout", function () {
                preview.style.display = "block";
            let img = link.querySelector("img");
                preview.style.left = event.pageX + 10 + "px";
             if (img) {
                preview.style.top = event.pageY + 10 + "px";
                 img.style.display = "none";
            });
             }
 
         });
            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";
             });
         }
     });
     });
});
});

Revision as of 20:41, 12 February 2025

/* Any JavaScript here will be loaded for all users on every page load. */
document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll(".image-hover").forEach(function (link) {
        link.addEventListener("mouseover", function () {
            let img = link.querySelector("img");
            if (img) {
                img.style.display = "block";
            }
        });

        link.addEventListener("mouseout", function () {
            let img = link.querySelector("img");
            if (img) {
                img.style.display = "none";
            }
        });
    });
});