リンク先の画像をポップアップ表示するブックマークレット

var removeFlag = new Array();
var popup_counter = 0;

function imagePopup(event) {
    var elem = event.target || event.srcElement;
    var popupId = elem.popupId;
    var div = document.createElement('div');
    div.id = 'imagePopup' + elem.popupId;
    div.style.position = 'absolute';

    // Image tag
    var img = document.createElement('img');
    img.src = (elem.href || elem.parentNode.href);
    img.style.border = '1px outset #ccb';

    set_default_size_and_pos(div, img, event.clientX, event.clientY);

    myLib.setEventHandler(
        img,
        'load',
        function() {
            if (img.complete || 'complete' == img.readyState) {
                set_pos(div, img, event.clientX, event.clientY);
            }
        }
    );
    myLib.setEventHandler(
        img,
        'error',
        function() {
            if (div && removeFlag[popupId]) {
                elem.style.textDecoration = 'line-through';
                div.className = "image_link_error";
                div.innerHTML = 'エラー';
            }
        }
    );

    div.appendChild(img);
    document.body.appendChild(div);

    // Set event handler
    myLib.setEventHandler(div, 'mouseover', function() { removeFlag[popupId] = false; });
    myLib.setEventHandler(div, 'mouseout', function() { div.parentNode.removeChild(div); });

    removeFlag[popupId] = true;
}

function set_default_size_and_pos(div, img, cx, cy) {
    var window_height = myLib.getWindowHeight();
    var max_height = parseInt(window_height * 7 / 10);
    var max_width  = parseInt((window.innerWidth  || document.documentElement.clientWidth || document.body.clientWidth) * 7 / 10);
    img.style.maxHeight = (max_height) + 'px';
    img.style.maxWidth  = (max_width ) + 'px';

    if (navigator.userAgent.indexOf("MSIE") != -1) {
        // For Internet Explorer
        var h = 1;
        var w = 1;

        if (img.height > max_height) { h = img.height / max_height; }
        if (img.width  > max_width ) { w = img.width  / max_width; }

        if (1 < h || 1 < w) {
            var t = Math.max(h, w);
            img.style.height = parseInt(img.height / t) + 'px';
            img.style.width = parseInt(img.width / t) + 'px';
        }
    }

    set_pos(div, img, cx, cy);
}

function set_pos(div, img, cx, cy) {
    var window_height = myLib.getWindowHeight();
    var max_height = parseInt(window_height * 7 / 10);

    // Position
    cx += (document.body.scrollLeft || document.documentElement.scrollLeft);
    cy -= 100;
    if (cy < 5) {
        cy = 5;
    } else if (window_height - (cy + Math.min(img.height, max_height)) < 5) {
        cy = window_height - Math.min(img.height, max_height) - 5;
    }
    cy += (document.body.scrollTop  || document.documentElement.scrollTop);
    div.style.left = (cx + 15) + 'px';
    div.style.top = cy + 'px';
}

myLib.addCSS("\
    .image_link_error {\
        color: red;\
        border: 1px solid black;\
        background-color: white;\
        padding: 3px;\
    }\
");

imagePopup_sethandler = function(node) {
    var a = node.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
        if (!a[i].href.match(/\.(?:jpe?g|gif|png|bmp|webp)(?:\?|$)/i)) { continue; }

        // used for discrimination of the deletion object
        a[i].popupId = popup_counter;

        // Image popup
        myLib.setEventHandler(a[i], 'mouseover', imagePopup);

        // Image remove
        myLib.setEventHandler(
            a[i],
            'mouseout',
            function(event) {
                var elem = event.target || event.srcElement;
                var popupId = elem.popupId;
                var div = document.getElementById('imagePopup' + popupId);

                setTimeout(
                    function() {
                        if (div && removeFlag[popupId]) {
                            div.parentNode.removeChild(div);
                        }
                    }
                    ,50
                );
            }
        );

        popup_counter += 1;
    }
}

imagePopup_sethandler(document);