Without going into the javascript too much, I can quite easily explain the way DLINK works, and we can all scratch our heads and wonder why nobody else does it so well...
Quite a lot actually. How often do you glance down at the status bar as you hover over a link to see where it goes? By doing this you can usually understand a lot more about what to expect from the link just from it's uri, and that's exactly how DLINK works.
As you know from looking at the uri we can answer most of the questions above, lets consider a few links and dissect them.
Assuming that these links are on a page on oopstudios.com we can garner a lot of information from the uri by considering the domain we're linking to, and wether there is a file extension or not.
I've highlighted the parts of the URI that the script looks for...
| URI | link relativity | probable content |
|---|---|---|
| http://dev.oopstudios.com/ | subdomain | webpage |
| mailto: david@oopstudios.com | email link | |
| http://oopstudios.com/CV.pdf | internal | pdf file |
| http://ajaxian.com/archives | external | webpage |
| http://oopstudios.com/#anchor | internal | anchor |
By considering the information above we can make an educated assumption about the link, and thus how to rewrite it!
The first (and easiest) thing to do is to add a class to the link using the link relativity so that you can give each type its own colour and styling.
After that we need to think about what icon we want to load. By considering the link relativity and probable content we know wether to load up an icon from my icons folder or if we should try and load up the favicon from the linkee website. Consider this:
| internal | subdomain | external | ||
|---|---|---|---|---|
| webpage | favicon | favicon | favicon | -- |
| email link | -- | -- | -- | email icon |
| ??? file | file icon | file icon | file icon | -- |
| anchor | anchor icon | favicon | favicon | -- |
So that's what we load!
Note: that the script has a few fallbacks, like if a favicon fails to load, it'll use default icon, and also that there's a finite number of file-extensions to check for, again falling back on a default icon.
Finally we can enhance (or create) the title attribute to repeat the information that we've taken from the URI which is always nice!