mootools_使用MooTools工具提示添加外部链接的网站屏幕截图

mootools

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.

在将用户发送到未知的外部网站之前，为什么不通过工具提示为他们提供该网站的屏幕截图，以便他们可以预览即将到来的页面？ 使用MooTools可以做到这一点。

View Demo 观看演示

MooTools JavaScript (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.

第一步是获取外部链接。 有了这些内容后，我们将SnapCasa链接图像放置在工具提示的文本中，并将该链接附加到我们的Tips实例。 在示例中，我已经做了一些非常简单的URL复制预防，但是为了更好地防止主机复制，您应该使用URI类来比较主机。

View Demo 观看演示

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.

注意：SnapCasa要求您注册一个免费帐户才能使用此功能。

翻译自: https://davidwalsh.name/screenshots-mootools-tooltips

mootools