It may be useful to your visitors to know which links will take them off of your site without having to hover over all of them. It might also be a nice touch to mark links pointing to PDF documents, for example, with a little Adobe PDF logo. With the help of Javascript and CSS, you can do this pretty simply.
First, we need some Javascript to go through our page and add a CSS class to every link that we want to differentiate.
JAVASCRIPT
// classes to them to better style outgoing links,
// PDF links, etc.
function link_classifier() {
// Get an array of all links in the page
var links = document.getElementsByTagName( 'a' )
// These variables will be used later to store
// the current 'a' object we're working with,
// and its URI
var curr_link, uri
// A regular expression to match URI's ending
// in 'pdf'
var pdf_regex = new RegExp( 'pdf$', 'i' )
// A regular expression to match URI's beginning
// with 'http://', which we will assume go to
// other sites
var outside_regex = new RegExp( '^http://', 'i' )
for ( var i=0; i<links.length; i++ ) {
curr_link = links[i]
uri = curr_link.getAttribute( 'href' )
// Add a CSS class to PDF links
if ( pdf_regex.test( uri ) )
add_class( curr_link, 'pdf' )
// Add a CSS class to outside links
if ( outside_regex.test( uri ) )
add_class( curr_link, 'outside' )
}
}
// Given some object and a class name, this
// function will append the given class name
// to the CSS class of the object
function add_class( object, class_name ) {
var old_class = object.getAttribute( 'class' )
if ( old_class == '' || old_class == null )
object.setAttribute( 'class', class_name )
else
object.setAttribute( 'class', old_class + ' ' + class_name )
}
// Tell the browser to run our link_classifier
// function when the page loads
window.onload = link_classifier()
Now we can style the links based on their class names. You could do whatever you wanted to with them, maybe make all outgoing links bold, whatever. For me, I like having little icons next to outgoing links or other special links. If it's a PDF document, maybe use an Adobe logo. If it's an MP3, a little music note. Get creative! Anywho, here's some CSS for sticking such little logos in after the text of a link:
CSS
background: url('outgoing_link.gif') no-repeat right center;
padding-right: 11px;
}
a.pdf {
background: url('pdf.gif') no-repeat right center;
padding-right: 14px;
}
I set the right padding to be the width of the icon plus 1, so that the icon wouldn't be pressed right against the text.
I think I have to try that, because adding manually those outgoing link -icons is boring and I don’t remember to do it always.
Excellent script, thanks for posting! I had something similar which didn’t work for me, and I somehow never had the nerve or time to get it to work…
Yay! At last; I’ve been looking for something like this for a while. :)
But where does the JAVASCRIPT go? I put it first thing in my header.php page for my wordpress site. But the JAVASCRIPT is just showing rather than doing what it’s supposed to do. n_n;
Joanna, you have to put it in <script type="text/javascript"></script>
hi,
thank you for this example. do you know how we could do the same but with a regex.
we create a regex that matches all out going links, and then we give them a different class, etc
i am working on that regex but if you have an idea, let me know.
kr