You can use CSS attribute selectors to selectively control link styles, such as adding a small icon to all external links to identify them as external links.
But using css has disadvantages:
1. It only supports browsers such as FireFox that have good support for web standards.
2. It can only judge links, not anchor points or javascript. If you encounter it, there is nothing you can do.
This can be done in combination with js. First write a style:
The following is a reference fragment:
a.other:link,a.other:visited,a.other:active
{
background:url("external.gif") no-repeat top right;
padding-right:15px;
}
Write another js, but the js must take into account the diversity of links, such as the javascript, anchor points, etc. mentioned above. If it's an image link, don't apply a style.
Here is a quote:
<script type="text/javascript">
window.onload = function()
{
var aList = document.getElementsByTagName('a');
var iCount = aList.length;
for(var i = 0;i<iCount;i++)
{
if(!chkMyLink(aList[i].href,aList[i].innerHTML))
{
aList[i].className ='other';
}
}
}
//s is the url of the link, innerhtml is the link text
function chkMyLink(s,innerhtml)
{
if(innerhtml.replace( /^s*/,"").match(/^<img/gi)) return true;
var reg = /^http:///gi;
if(s.match(reg))
{
reg = /^http://www.lemongtree.com/gi;
if(s.match(reg))
{
return true;
}
else
{
return false;
}
}
return true;
}
</script>
The effect can now be seen.