Picture Rollover

By Sour — Last update Jul 20, 2008 — Installed 591 times.
// ==UserScript==
// @name          Picture Rollover
// @namespace     
// @description      Shows images when rolling over a URL.
// @include       *
// ==/UserScript==

(function() {
var posx=0, posy=0;
var posScreenx=0, posScreeny=0;

function get_coords(event)
{
    posx = event.clientX + window.pageXOffset;
    posy = event.clientY + window.pageYOffset;
    
    posScreenx = event.pageX - window.pageXOffset;
    posScreeny = event.pageY - window.pageYOffset;
}

function createEvent(link)
{
    link.addEventListener("mouseover", function(event)
    {
        get_coords(event);
        var image = document.createElement("img");
        image.setAttribute("src", link.href);

        // if the popup image would exceed the window bounds,
        // scale the image to fit on the screen
        {
            var windowH = window.innerHeight;
            var windowW = window.innerWidth;
            
            var diffX = windowW - (posScreenx + 5 + image.width + 30); // +30 little bit padding
            var diffY = windowH - (posScreeny - 5 + image.height + 20); // +20 little bit padding
    
            var scaleFactorX = 1;
            if(diffX < 0) { // if image is to wide
                var scaleFactorX = 1 + diffX / (image.width); 
            }
    
            var scaleFactorY = 1;
            if(diffY < 0) { // if image is to high
                var scaleFactorY = 1 + diffY / (image.height); 
            }
    
            if(scaleFactorX < scaleFactorY) {
                image.width = image.width * scaleFactorX;
            } else {
                image.height = image.height * scaleFactorY;
            }
        }

        image.setAttribute("style", "position:absolute;z-index:1000;top:" + (posy - 5) + "px;left:" + (posx + 5) + "px;");
        image.setAttribute("id", "rolloverimage");
        document.body.appendChild(image);
    }, false);
    
     link.addEventListener("mouseout", function()
     {
         document.getElementById("rolloverimage").parentNode.removeChild(document.getElementById("rolloverimage"));
    }, false);
}

    for (i = 0; i < document.links.length; i++)
    {
        if (document.links[i].href.search(/\.(?:jp(?:e?g|e|2)|gif|png|tiff?|bmp|ico)$/i) != -1)
        {
            createEvent(document.links[i]);
        }
    }
})();