別サイトへ飛ぶ 外部テキストリンクの後ろにつけるアイコン

別サイトへ飛ぶ　外部テキストリンク
その後ろにつけるアイコンを探していたら
とても便利そうなサイトを発見


▼外部リンクや各ファイルに合ったアイコンを自動的につける｜web bibo



cssで自動で表示
これは便利かも。


サイトが無くなると困るのでメモさせて
いただきました。



▼以下メモ



□HTML

<p><a href="http://webbibo.com/">ホームに戻る</a></p> 
<p><a href="http://www.google.co.jp/" target="_blank">GoogleのTOPページ</a></p> 
<p><a href="test.pdf">Webアンケート結果</a></p> 
<p><a href="test.doc">FAX送付状</a></p> 
<p><a href="test.xls">月別売上集計表</a></p> 
<p><a href="test.zip">アクセス解析プログラム</a></p>

□CSS

p a{
    padding:4px 20px 4px 0;
}
 
a[href^="http"]{background:url(images/tips/external.png) no-repeat 100% 50%;}	/*モダンブラウザ向け*/
* html a.external{background:url(images/tips/external.png) no-repeat 100% 50%;}	/*IE向け*/
 
a[href$=".pdf"]{background:url(images/tips/pdf.png) no-repeat 100% 50%;}
* html a.pdf{ background:url(images/tips/pdf.png) no-repeat 100% 50%;}
 
a[href$=".doc"]{background:url(images/tips/word.png) no-repeat 100% 50%;}
* html a.doc{ background:url(images/tips/word.png) no-repeat 100% 50%;}
 
a[href$=".xls"]{background:url(images/tips/excel.png) no-repeat 100% 50%;}
* html a.xls{ background:url(images/tips/excel.png) no-repeat 100% 50%;}
 
a[href$=".zip"]{background:url(images/tips/zipper.png) no-repeat 100% 50%;}
* html a.zip{ background:url(images/tips/zipper.png) no-repeat 100% 50%;}
 
a[href^="http://webbibo.com"],	/*自サイトのURLを記述*/
a[href^="http://www.webbibo.com"]{	/*自サイトのURLを記述*/
    padding:inherit;
    background:transparent;
}
 
* html a{ /* IEのみ */
    behavior: expression(
    this.className += this.getAttribute("href").match(/^http.*/) && (!this.getAttribute("href").match("webbibo.com")) ? " external" : "",
    this.className += this.getAttribute("href").match(/\.pdf$/) ? " pdf" : '',
    this.className += this.getAttribute("href").match(/\.doc$/) ? " doc" : '',
    this.className += this.getAttribute("href").match(/\.xls$/) ? " xls" : '',
    this.className += this.getAttribute("href").match(/\.zip$/) ? " zip" : '',
    this.style.behavior = "none"
    );
}