O'Reilly

Add Site Screenshots for External Links Using MooTools Tooltips

By on  

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.

Track.js Error Reporting

Upcoming Events

Recent Features

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • Record Text Selections Using MooTools or jQuery AJAX

    One technique I'm seeing more and more these days (CNNSI.com, for example) is AJAX recording of selected text. It makes sense -- if you detect users selecting the terms over and over again, you can probably assume your visitors are searching that term on Google,...

  • Create Digg URLs Using PHP

    Digg recently came out with a sweet new feature that allows users to create Tiny Digg URLs which show a Digg banner at the top allowing easy access to vote for the article from the page. While I love visiting Digg every once in a...

Discussion

  1. Jan

    Thank’s for an idea of this cool service :) http://snapcasa.com/ – and of course great tool tip idea

  2. Rakesh Juyal [RJ]

    gr8 David, it looks fine. BTW one can also have ‘cool previews’ firefox addon for the same thing.

  3. jem

    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.

  4. The demo doesn’t work for me! in FFOX, IE, CHROME.

  5. @Kepler: The downside of having a free account is that it can max out quickly :). It appears to be a bit slow.

  6. 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

  7. “@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!

  8. T Pink

    I would recommend sitethumbshot. Great service in great price. http://www.sitethumbshot.com/premium_service.php

  9. matt t

    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.

  10. Matthew

    I have been using http://www.w3snapshot.com on my blog and it is working nicely.

  11. it looks fine. BTW one can also have ‘cool previews’ firefox addon for the same thing

  12. george

    I have tested a lot of tools a site sites thumbnail generators to use with a pligg (digg style sms) site but I think that http://www.megasnaps.com is the best for this use. His free web site to image page, create a image of the whole html page, and offers a cropped options too to be downloaded.

    The website thumbnails generator service are a good option for any type of web sites, offers a full page and custom sizes for the cheaper price tha I have found. I do a great instalation with ‘facebox’ (jquery), by clicking on a small image it open a larger one ‘facebook style’ image with a full size snapshot looks great!.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Get Node.js Command Line Arguments with yargs

    Using command line arguments within Node.js apps is par for the course, especially when you're like me and you use JavaScript to code tasks (instead of bash scripts).  Node.js provides process.argv but that doesn't provide a key: value object like you'd expect: Bleh.  If you want to work with a...

  • OâReilly Velocity Conference â New York

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • Free Download: Font Bundle Featuring 17 Incredible Typefaces

    The only thing we love more than a good font, is a good free font. So we’ve combed the Web for some of our favorite free fonts, and gathered them here in a single download. You’ll find a variety of useful typefaces, from highly geometric designs...

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...