<!-- 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">
/*! 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...');
}
waitForBodyExist();
// Function to show the tooltip
// `width` => the tooltip width
// `height` => the tooltip height
// `file` => the URL of the image to show
function showTrail(width, height, file) {
tooltip.style.visibility = "visible";
tooltip.children[0].src = file;
tooltip.style.width = parseInt(width, 10) + "px";
tooltip.style.height = parseInt(height, 10) + "px";
d.onmousemove = function (e) {
if (!e) e = w.event;
if (e.pageX || e.pageY) {
left = e.pageX;
top = e.pageY;
} else if (e.clientX || e.clientY) {
left = e.clientX + d.body.scrollLeft + d.documentElement.scrollLeft;
top = e.clientY + d.body.scrollTop + d.documentElement.scrollTop;
}
tooltip.style.top = parseInt(((top >= docHeight - (height + offsetTop + 10)) ? top - (height + offsetTop) : top + offsetTop), 10) + "px";
tooltip.style.left = parseInt(((left >= docWidth - (width + offsetLeft + 10)) ? left - (width + offsetLeft) : left + offsetLeft), 10) + "px";
};
}
// Function to hide the tooltip
function hideTrail() {
d.onmousemove = "";
tooltip.style.top = "-9999px";
tooltip.style.left = "-9999px";
tooltip.style.visibility = "hidden";
tooltip.children[0].src = noImage;
docWidth = getDocWidth();
docHeight = getDocHeight();
}
// Add to the window object as an external/global function
w.showTrail = showTrail;
w.hideTrail = hideTrail;
})(window, document);
// Apply the functions automatically by checking the matching of Picasa URL
(function () {
var img = document.getElementsByTagName('img');
for (var i = 0, len = img.length; i < len; ++i) {
var valid = (img[i].src && /\/s[0-9]+(\-c)?\/.*?\.(bmp|gif|jpg|jpeg|png)/i.test(img[i].src));
if (valid) {
img[i].onmouseover = function () {
if (this.offsetWidth <= 100) {
showTrail(this.offsetWidth * 4, this.offsetHeight * 4, this.src.replace(/\/s[0-9]+(\-c)?/, "/s400$1"));
}
};
img[i].onmouseout = hideTrail;
}
}
})();
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);
}