Add Site Screenshots for External Links Using MooTools Tooltips
Written by David Walsh on Tuesday, June 2, 2009
Click here to learn what has changed to make your code framework-compatible.
Before you send your user to an unknown external website, why not provide them a screenshot of the site via a tooltip so they may preview the upcoming page? Here’s how you can do just that using MooTools.
The MooTools Javascript
/* when the dom is ready... */
window.addEvent('domready',function() {
/* tooltips */
var tips = new Tips();
var tipURLs = [];
/* grab all complete linked anchors */
$$('a[href^="http://"]').each(function(a) {
/* if it's not on the davidwalsh.name domain */
var href = a.get('href');
if(!href.contains(window.location.host) && !tipURLs.contains(href)) {
/* vars */
tipURLs.push(href);
var url = href.replace(window.location.protocol + '//','');
/* set tooltip info */
a.store('tip:title','');
a.store('tip:text','<img src="http://snapcasa.com/get.aspx?code=####&size=l&wait=0&url=' + url + '" />');
a.addClass('screenshot');
/* attach tooltip */
tips.attach(a);
}
});
});
The first step is to grab the external links. When we’ve got those, we place the SnapCasa link image in the tooltip’s text and attach the link to our Tips instance. I’ve done some very simple URL duplication prevention in my example but so for better host duplication prevention you should use the URI class to compare hosts.
I think this functionality is a nice feature but you’ll want to limit its use to avoid the screenshots becoming annoying. What do you think?
Note: SnapCasa requires you to register for a free account to use this functionality.
Epic Discussion
Be Heard!
I want to hear what you have to say! Share your comments and questions below.
Thank’s for an idea of this cool service :) http://snapcasa.com/ – and of course great tool tip idea
gr8 David, it looks fine. BTW one can also have ‘cool previews’ firefox addon for the same thing.
Nice little feature, the only thing it seems like this could use is some sort of preloader icons, it takes quite a while (at least for me) before the image requests go through from the site… And since the tips class isnt popuplating the page with a tip’s info until its moused over, it kinda kills the effect. You could try using the Assets class and see if you can begin preloading the images from your tipURLs array, might help a bit.
The demo doesn’t work for me! in FFOX, IE, CHROME.
@Kepler: The downside of having a free account is that it can max out quickly :). It appears to be a bit slow.
Hmm, maybe you can ask the guys from the FF Plugin “Googlepreview” (http://ackroyd.de/googlepreview) if its OK to use their large web thumb LIB.
The URLs are really simple like “http://t.googlepreview.com/preview?s=http://www.YOUR-DOMAIN.de&ra=1″, and if there is no thumb, it shows a dummy, but you can request thumb shots of websites.
Greetz from DTown
“@Kepler: The downside of having a free account is that it can max out quickly :). It appears to be a bit slow.”
Yea, that’s a downside, but the upside is the obvious… it’s FREE!
I would recommend sitethumbshot. Great service in great price. http://www.sitethumbshot.com/premium_service.php
am getting an undefined error on the var tips = new Tips().
Otherwise, using the code as is along with the css etc.
Been trying to get MooTools working for a couple of days and your demo’s are the first to make sense to this noob… Thankyou.