JavaScript Image Trail Tooltip by Taufik Nurrohman, inspired from http://www.sxc.hu

http://gplus.to/tovic

by Taufik Nurrohman

HTML

<!-- From Picasa -->
<img alt="Thumbnail 1" src="http://4.bp.blogspot.com/_yGa4b5VGx6w/THSCxHYp-JI/AAAAAAAAAII/2JDo41KaOog/s100/tree_forest_rural_243183_l.jpg" />
<img alt="Thumbnail 2" src="http://1.bp.blogspot.com/-YnCv8Rv_5zg/UZxRoAJ0_BI/AAAAAAAAHco/eC2lojuGZ6I/s100/autumn-winter-20102.jpg" />
<img alt="Thumbnail 3" src="http://4.bp.blogspot.com/-wRHHclIdpXE/TaFlY16l_qI/AAAAAAAAALE/0BhXZd5-qhA/s100/cherry-blossom_viewing.jpg" />
<img alt="Thumbnail 4" src="http://1.bp.blogspot.com/-mNhRTmkZ284/T1tMrR1TNPI/AAAAAAAACTk/a6PapXX4T6Q/s100/LavenderFlowers.jpg" />
<img alt="Thumbnail 5" src="http://3.bp.blogspot.com/-KSS-yEGfXWk/UKtJg_s-pmI/AAAAAAAAFek/PHT8k7ReQd8/s72-c/dew-in-the-grass.jpg" />
<!-- Too Large + Not from Picasa -->
<img alt="Thumbnail 6" title="Too Large!" src="http://4.bp.blogspot.com/_yGa4b5VGx6w/TGC7MX8ImeI/AAAAAAAAAHA/1rzaqOvFHNw/s300/1_sakura2.jpg" />
<img alt="Thumbnail 7" title="Not from Picasa" src="http://lorempixel.com/150/100/food">

CSS

body {
    padding:10px;
    background-color:white;
}
img {
    float:left;
    margin:0 4px 4px 0;
}
/* Image Trail Tooltip CSS */
 .trail-image {
    width:0;
    height:0;
    background-color:#ddd;
    border:1px solid #888;
    position:absolute;
    top:-9999px;
    left:-9999px;
    z-index:9999;
    visibility:hidden;
    -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow:0 1px 1px rgba(0, 0, 0, .2);
    box-shadow:0 1px 1px rgba(0, 0, 0, .2);
}

JavaScript

/*! JavaScript Image Trail Tooltip by Taufik Nurrohman <http://gplus.to/tovic> */
(function (w, d) {

    var tooltip = d.createElement('div'),
        noImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", // 1 x 1 pixel transparent GIF
        top = 0,
        left = 0,
        docWidth = 0,
        docHeight = 0,
        offsetTop = 20, // Default top distance of the tooltip to the mouse pointer
        offsetLeft = 20, // Default left distance of the tooltip to the mouse pointer
        wait = null;

    // Get the correct width of the document without scrollbars
    function getDocWidth() {
        return d.documentElement.clientWidth;
    }

    // Get the correct height of the document
    function getDocHeight() {
        return Math.max(
        d.body.scrollHeight, d.documentElement.scrollHeight,
        d.body.offsetHeight, d.documentElement.offsetHeight,
        d.body.clientHeight, d.documentElement.clientHeight);
    }

    tooltip.id = "trail-image";
    tooltip.className = "trail-image";
    tooltip.innerHTML = '<img src="' + noImage + '" alt="Loading..." style="float:none;display:block;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;border:none;outline:none;background:none;margin:0;padding:0;">';

    // Just like `DOMContentLoaded` event, but only to
    // wait for the existence of the `<body>` element
    // to insert the tooltip markup in the proper area
    function waitForBodyExist() {
        if (!d.body) {
            wait = setTimeout(waitForBodyExist, 100);
        } else {
            clearTimeout(wait);
            d.body.appendChild(tooltip);
            docWidth = getDocWidth();
            docHeight = getDocHeight();
            w.onresize = function () {
                docWidth = getDocWidth();
                docHeight = getDocHeight();
            };
            w.onscroll = hideTrail;
        }
        // console.log('Still waiting...');
    }
   ...