The JavaScript Source: Navigation : Link Enhancer

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology
International

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

Using this script, outbound links will open in a new window automatically. No need to add anything to the link. The script will also apply a different style to the outbound link to make visitors aware it is an outbound link. You don't have to worry anymore about targets and the appearance, especially if your customers have their own CMS.

Notes

Created by: Jeroen Haan
Web Site: http://www.haan.net
Posted: June 20, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: linkEnhancer.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jeroen Haan | http://www.haan.net */
/* -----------------------------------------------
   Link Enhancer - v.1.1
   (c) 2007 www.haan.net
   contact: jeroen@haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When useful we will add your credits.
  ------------------------------------------------ */
  
// Give the outbound links a blank target and their own style
// and optional the inbound too or vise versa
// It will leave the mailto alone and skip anchor tags without the href attribute

function enhanceLinks() {
 	var links = document.getElementsByTagName("a");
	 var thisDomain = document.domain.split('www.');
 	var thisDomain = (thisDomain[1]) ? thisDomain[1] : document.domain ;
	 for (var i = 0; i < links.length; i++) {
  		if(links[i].href.indexOf(thisDomain) == -1 && links[i].href != '') {
			   links[i].target = '_blank';
   			links[i].className = 'link_ext';
 		 }
		// or else do this too if you like
		// else 
		// {
		//	links[i].target = '_self';
		//	links[i].className = 'link_int';
		// }		
	}
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  enhanceLinks();
});

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.link_ext {
 	height: 20px;
 	background: url(link_ext.gif) no-repeat right 4px;
 	padding: 0 13px 0 0;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="linkEnhancer.js"></script>

Body

Paste this code into the BODY section of your HTML document


<ul>
  <li><a href="http://www.webdeveloper.com/">Web Developer</a></li>
  <li><a href="http://javascript.internet.com/">JavaScript Source</a></li>
  <li><a href="http://www.webreference.com/">WebReference.com</a></li>
</ul>

Other

Download the images using the URL below:

Download the images here

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

2. From: jez jones
07/31/2007 05:18:51

1. From: Anonymous
06/20/2007 17:59:51

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

2. From: jez jones07/31/2007 05:18:51

1. From: Anonymous06/20/2007 17:59:51

2. From: jez jones
07/31/2007 05:18:51

1. From: Anonymous
06/20/2007 17:59:51