The arc90 lab is the playground of arc90 - a New York-based technology and strategic consulting firm. The lab is a place for us to share our ideas, tools and the occasional experiment in web technology. All ideas, experiments and tools are licensed under Creative Commons.
This site is licensed under a Creative Commons Attribution 2.5 License.
Tools
External Link
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:
Add Classes to Your Link Tags
Add a new window icon to a link by adding the "extlink" class:
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:
And now you don't even need a class on your links:
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.
