The nofollow attribute

If you have ever heard about rel="nofollow" attribute in your links so search engines will not follow certain links and you are using it a lot, then you should read the following article "Nofollow is a leaky condom" that discusses this attribute. In this article you will find an alternative to this attribute, but it is not unobtrusive (the javascript code is still between your HTML) and I don't like that.

So I've written an unobtrive script and it is very easy to implement. This is the result: "not a link but still looks like one"

The Script

As you can see below is the code. I used the addEvent() function to add the function to the onload of the page. 

addEvent( window, 'load', relNoFollow );

function relNoFollow()
{
	var FakeLinks = document.getElementsByTagName('span');
	
	if( FakeLinks.length > 0 )
	{
		for( var i = 0; i < FakeLinks.length; i++ )
		{
			if( FakeLinks[i].title.indexOf( 'http://' ) != -1 )
			{
				FakeLinks[i].onmouseout 	= fakelinkMouseOut;
				FakeLinks[i].onmouseover 	= fakelinkMouseOver;
				FakeLinks[i].onclick 		= fakelinkClick;
			}
		}
	}
}

function fakelinkMouseOver()
{
	this.className = 'fakelink-hover';
}

function fakelinkMouseOut()
{
	this.className = 'fakelink';
}

function fakelinkClick()
{
	var FakeLinkWindow = window.open( this.title, 'outbound', '' );
}


// example span
<span title="http://www.vdgraaf.info" class="fakelink">
	"not a link but still looks like one"
</span>

The script will check if there are any <span> tags in you HTML. 

var FakeLinks = document.getElementsByTagName('span');

This will store a reverence of all your spans in the page in var FakeLinks. After that It will loop through the list of spans and checks if the spans have a title with a link in it. 

for( var i = 0; i < FakeLinks.length; i++ )
{
	if( FakeLinks[i].title.indexOf( 'http://' ) != -1 )
	{
		// 
	}
}

As in FakeLinks[i].title.indexOf( 'http://' ) the script will check if there is a occurrence of http:// in the title. If there is indexOf() returns 0 or higher. If http:// does not occur, then it will return -1. So when I check it and it does not return -1, it should have http:// in it and I assume this is a outbound link I specified.

Adding CSS behaviour

After that I will set the behaviours of the fakelink. I will use the onmouseover and the onmouseout events to create the CSS-like behaviour. I register the functions fakelinkMouseOut and fakelinkMouseOver to onmouseout and onmouseover. 

FakeLinks[i].onmouseout 	= fakelinkMouseOut;
FakeLinks[i].onmouseover 	= fakelinkMouseOver;

When you have registered the functions on the events the this element can be used in the fakelinkMouseOut and fakelinkMouseOver functions. With this we can access the FakeLinks[i] element. The this element refers to the span element that was put in the array. Now we can specify the className of the fakelink so it will look like an oridinary link if we hover it. 

function fakelinkMouseOver()
{
	this.className = 'fakelink-hover';
}

In your CSS file you will have to declare the .fakelink-hover class and give him the same looks as your plain <a> links. This you have to do also for the mouseover 

function fakelinkMouseOut()
{
	this.className = 'fakelink';
}

The function adds the normal fakelink class when your mouse leaves the span. Now when that's done you still have to set an onclick action so the link will actualy go to the page given by the title attribute. 

FakeLinks[i].onclick 		= fakelinkClick;

function fakelinkClick()
{
	var FakeLinkWindow = window.open( this.title, 'outbound', '' );
}

The fakelinkClick opens a new window for me with the page that is given by the title attribute. Your script is finished

Update

In another article I wrote a script that could track some specific stuff for Google Analytics. As you can see this span link is not trackable for Google Analytics. So here is my update that will let me track all the span links. 

function fakelinkClick()
{
	var FakeLinkWindow = window.open( this.title, 'outbound', '' );
	
	// add the following line to the function that is specified above
	urchinTracker( '/span/'+this.title );
}

I'll hope this article is helpfull. If you have any questions just let me know email of something.