The fourth tool out of the Arc90 lab addresses one of those problems that every web developer has struggled with at some point: opening links in a new browser window. External Link is a script that appends an icon to external links — an icon that opens the link in a new window. Now, the user has the choice to follow the link in the current window by clicking on the text, or open it in a new one with the icon. It’s a nice, clean solution.
What is this?
Providing users with a simple way to choose whether to follow a link by opening a new window or not is a tricky problem, and most solutions aren’t easy to implement. Not so with External Link. Include our script in your blog or web page and just add classes to your links, and you give users convenient icons to open new windows, while maintaining the text links for continuing in the current window. No hassle, no fuss and no more problem.
Giving all of your links this helpful feature is easy, too. Just copy one extra line into your html head and you don’t even need to add classes to your links. Plus, the script is smart enough to avoid adding the icon to links that don’t go to external sites.
How Do I Use It?
Download the Code
Click on the icon below to download the source code for External Link:
The file, extlink.zip, contains the script, one required image and an example page. Once downloaded, upload the script and the image to your site. They must be in the same directory.
Link to the Javascript and Add Style
Add a link to the javascript in the page(s) you’d like External Link implemented. Remember to adjust the path to properly point to the location of the file on your server. Then, you need to add a line of CSS code.
You can copy this line and paste it into your <head> section:
<script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_extlink.js"></script>
<style type="text/css" media="screen">.arc90_extlinkIMG { background: transparent url(/tools/c/images/extLink_img.gif) no-repeat top right; margin-left: 2px; height: 12px; width: 12px; cursor: pointer; padding-left: 12px; }</style>
Add Classes to Your Link Tags
Add a new window icon to a link by adding the “extlink” class:
<p>I can add a new window icon to an external link just by adding a class to my anchor tag.</p> <p>Here is an ordinary <a href="http://www.basement.org" class="extlink">basement.org</a> link.</p> <p>Here's a paragraph without a link.</p> <p>...
Give Icons to All
It’s easy to add new window icons to all of your external links, too. Add the following line to your script headers:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>arc90 lab | tools: External Link</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script language="JavaScript" type="Text/JavaScript" src="http://myserver.com/path/to/javascript/arc90_linkthumb.js"></script> <script>arc90_extLinkUseClassName = false;</script> </head>
And now you don’t even need a class on your links:
<p>This <a href="http://www.google.com">regular old link</a> will have an icon.</p> <p>And guess what - <a href="http://www.yahoo.com">this one</a> will, too.</p> <p>Here's a paragraph without a link.</p> <p>...
Examples
You can see External Link in action by clicking here.
Supported Browsers
Currently, the External Link script has been tested and confirmed on the following browsers:
- Internet Explorer 6.0+
- Mozilla Firefox 1.5+
- Apple Safari 2.0
- Opera Version 9.0
Licensing
This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.
Discuss External Link
You can send feedback on External Link at the arc90 blog.