CSS 属性セレクターを使用すると、すべての外部リンクに小さなアイコンを追加して外部リンクとして識別するなど、リンク スタイルを選択的に制御できます。
ただし、CSS の使用には次のような欠点があります。
1. Web 標準を十分にサポートしている FireFox などのブラウザのみをサポートします。
2. アンカーポイントやJavaScriptではなく、リンクのみを判断します。遭遇したらどうすることもできません。
これは js と組み合わせて行うことができます。まずスタイルを記述します。
以下は参照フラグメントです。
a.other:リンク、a.other:訪問済み、a.other:アクティブ
{
背景:url("external.gif") 右上; 繰り返しなし;
パディング右:15px;
を
作成しますが、その js では、上記の JavaScript やアンカー ポイントなどのリンクの多様性を考慮する必要があります。 画像リンクの場合は、スタイルを適用しないでください。
ここに引用があります:
<script type="text/javascript">
window.onload = 関数()
{
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 ='その他';
}
}
}
//s はリンクの URL、innerhtml はリンク テキストです
関数 chkMyLink(s,innerhtml)
{
if(innerhtml.replace( /^s*/,"").match(/^<img/gi)) true を返します。
var reg = /^http:///gi;
if(s.match(reg))
{
reg = /^http://www.lemongtree.com/gi;
if(s.match(reg))
{
true を返します。
}
それ以外
{
false を返します。
}
}
true を返します。
}
</script>
効果が確認できるようになりました。