XKCD Preview

By Einar Egilsson — Last update Aug 25, 2008 — Installed 59 times.
There are 1 previous version of this script.
// ==UserScript==
//
// @name            XKCD Preview
// @namespace       http://tech.einaregilsson.com/projects/greasemonkey#xkcd-preview
// @description     Shows a preview of an XKCD comic when hovering over a link that links to it.
// @author          Einar Egilsson (greasemonkey@einaregilsson.com)
// @include         *
// @exclude         http://xkcd.com*
// @exclude         http://www.xkcd.com*
//
// ==/UserScript==

// version 0.1 - 2008-07-07
//   Initial version
//
// version 0.2 - 2008-08-25
//   Fixed image matching so the comic image is always found instead of other images.
//   Changed namespace


(function() {


    function createPreviewDiv(link, imgSrc, heading, imgTitle) {
        
        //Create the elements
        var div = document.createElement('div');
        var img = document.createElement('img');
        var h3 = document.createElement('h3');
        img.setAttribute('src', imgSrc);
        img.setAttribute('title', imgTitle);
        h3.innerHTML = heading;
        div.appendChild(h3);
        div.appendChild(img);

        //Calculate position
        for (var x = 0, y = 0;  link.offsetParent; link = link.offsetParent) {
            x += link.offsetLeft;
            y += link.offsetTop;
        }

        //Set style information
        div.style.position = 'absolute';
        div.style.backgroundColor = 'white';
        div.style.border = 'solid 1px black';
        div.style.cursor = 'pointer';
        div.style.top = (y + 20) + 'px';
        div.style.left = x + 'px';
        div.style.padding = '3px';
        
        h3.style.textAlign = 'center';
        h3.style.fontSize = '16pt';
        h3.style.width = '100%';
        div.zIndex = '999';
        return div;
    }

    function showPreview(event) {

        var link = event.currentTarget;
        var href = link.toString();
        
        GM_xmlhttpRequest({
            method : "GET",
            url : link.toString(),
            headers: { "User-agent": "Mozilla/4.0 (compatible) Greasemonkey" },
            onload: function(responseDetails) {

                if (responseDetails.status != 200) {
                    alert("Failed to load xkcd image, message is: " + responseDetails.status + " " + responseDetails.statusText);
                    return;
                }
                var match = responseDetails.responseText.match(/<img src="(http:\/\/imgs\.xkcd\.com\/comics[^"]*?)"\s+title="([^"]*?)"\s+alt="([^"]*?)"/);
                
                var div = createPreviewDiv(link, match[1], match[3], match[2]);

                div.addEventListener('click', function(event) {
                    div.parentNode.removeChild(div);
                    link.addEventListener("mouseover", showPreview, true);
                }, true);
                
                link.removeEventListener("mouseover", showPreview, true); //Make sure we don't get many previews
                document.getElementsByTagName('body')[0].appendChild(div);
            }
        }); //end GM_xmlhttpRequest
    }
    

    //Setup event listeners to show the previews
    for each(var candidateLink in document.getElementsByTagName("a")) {
        if (candidateLink.href && candidateLink.href.match(/http:\/\/(www\.)?xkcd\.com\/(\d+\/?|c\d+\.html)/)) {
            candidateLink.addEventListener("mouseover", showPreview, true);
        }
    }

})();