The easiest might be to do it in javascript (the parsing of the html-dom isn’t very simple in php)...
A simple (non-elegant) way of doing this you can se in the followng code:
<html>
<head>
<style type="text/css">
a.external {
background: url("link_external.gif") no-repeat 0 0;
padding-left: 15px;
}
a.internal {
background: url("link_internal.png") no-repeat 0 0;
padding-left: 15px;
}
a.wikipedia {
background: url("link_wikipedia.png") no-repeat 0 0;
padding-left: 15px;
}
a.apple {
background: url("link_apple.png") no-repeat 0 0;
padding-left: 15px;
}
img.hidden {
display: none;
}
</style>
</head>
<body>
<p>
<a href="http://wikipedia.org/" title="....">Wikipedia</a><br />
<a href="nex.html" title="....">Internal</a><br />
<a href="http://www.apple.se/" title="....">Apple</a><br />
<a href="http://www.modxcms.com/" title="....">MODx</a><br />
<img class="hidden" src="link_wikipedia.png" />
<img class="hidden" src="link_external.png" />
<img class="hidden" src="link_internal.png" />
<img class="hidden" src="link_apple.png" />
<script type="text/javascript">
var targets = new Array();
targets[0] = new Array();
targets[0][0] = 'wikipedia';
targets[0][1] = /^http:\/\/[a-z\.]*wikipedia\.org/i;
targets[1] = new Array();
targets[1][0] = 'apple';
targets[1][1] = /^http:\/\/www\.apple\./i;
var links = document.getElementsByTagName('a');
for (var i=0;i<links.length;i++) {
if (links[i].href) {
for (var j=0;j<targets.length;j++) {
if (targets[j][1].test(links[i].href)) {
links[i].className = targets[j][0];
break;
}
}
if (links[i].className == '') {
var internal = /^http:\/\/localhost/i;
if (internal.test(links[i].href)) {
links[i].className = 'internal';
} else {
links[i].className = 'external';
}
}
}
}
</script>
</body>
</html>
Here I first define the css:
- Each possible type has it’s one definition – in this case ’internal, ’external’, ’wikipedia’ and ’apple’ and icons for these need to be supplied (I have attached them) and referenced correctly.
- The .hidden-class is to preload the images.
Then comes the body with the links and the hidden images.
After that i put the javascript (not good practice, but easy when not using a framework...).
- The additional types need to be defined in the targets-array as I’ve done with ’wikipedia’ and ’apple’
- The script goes through all the links and matches them to the regular expressions in the targets-array
- If a class is not defined for the link when it has gone through all the expressions it checks to see if it is an internal link (needs to be changed from ’localhost’ to something more appropriate) else it gives it the external-class.
With a javascript-framework you could make this a lot prettier, append a new class to the href instead of replacing it (which this script does) and you could put everything in an external js-file which you could build via a snippet in MODx.
Feel free to use the code as you like – I won’t do anything more with it (atleas not for a while) because I should be studying for my exams..
Ps. The images are taken from the referenced site without permission etc, likewise the apple-icon – so don’t use these on a live site without making sure you are allowed to use the images. Admins, please feel free to delete them if you see that it’s necessary. Ds.
☆ A M B ☆
(altough it’s a nice to have)
