CSS no Lanche

Mostrar ao usuário de forma criativa que determinado link de seu site faz referência a outro, é uma boa regra de usabilidade, você pode fazer isso com CSS, de uma forma bem simples, mas infelizmente não irá funcionar no Internet Explorer, ou você pode fazer isso através de JavaScript. Caso você não seja ninja nessa arte, pode fazer isso facilmente com jQuery.

O que basicamente é feito pelo JavaScript é testar se o location.hostname, o link do hostname, é o mesmo representado no this.hostname. Basicamente ele efetua o seguinte teste: this.hostname && location.hostname !== this.hostname.

A função filter()

Nesse exemplo vamos utilizar a função filter() para testar todos os nossos links, vejam uma descrição do script abaixo:

$(document).ready(function() {
  		$('a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
  		}).after(' <img src="external.png" alt="external link" />');
	});

A função irá verificar os links, e se achar algum link externo ao meu site, adiciona-rá uma imagem indicando isso. Exemplo do script em ação.

Esse tutorial é uma adptação do original de: Learning jQuery.