リンクしているファイルのアイコンを表示
JavaScriptを利用してリンク先のファイルのアイコンを表示する方法です。IE6も考慮してjQueryを使って実装します。最初からHTMLに画像を表示するように記述しておくという方法もありますが、JavaScriptで一括処理したほうがミスがないし楽です。
まず最初にアイコンとして使う画像ファイルを用意してください。その画像をJavaScriptで差し込みます。A要素のhref属性に記述された拡張子を判別して、リンク文字列の前にアイコン画像を挿入するわけです。以下がそのサンプルで画像のサイズは16×16となっています。
- 実行ファイル(*.exe)
- テキストファイル(*.txt)
- PDFファイル(*.pdf)
- Wordファイル(*.doc)
- Excelファイル(*.xls)
- RTFファイル(*.rtf)
- ZIP書庫ファイル(*.zip)
- LZH書庫ファイル(*.lzh)
- JavaScriptファイル(*.js)
- RDFファイル(*.rdf)
- RSSファイル(*.rss)
- Atomファイル(*.atom)
導入方法はそれほど難しくありません。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いてそれを読み込ませてもかまいません。
実際に利用するには、jQueryを読み込ませた次の行へ以下のようにJavaScriptを記述して処理を行ないます。対応させたい拡張子とアイコンにする画像を指定していくだけなので、アイコンを表示するファイル種別を増やすことも簡単です。実際に使用する際には、汎用性とメンテナンス性を考慮してこの部分は外部JavaScriptファイルにしておき、それを読み込ませたほうがよいでしょう。
<script type="text/javascript">
$(function(){
addIconPath='/img/icon/';
addIconClass=' class="fileicon"';
$("a[href$='.doc'], a[href$='.rtf']").prepend('<img src="'+addIconPath+'word.png"'+addIconClass+'>');
$("a[href$='.exe']").prepend('<img src="'+addIconPath+'exe.png"'+addIconClass+'>');
$("a[href$='.js']").prepend('<img src="'+addIconPath+'js.png"'+addIconClass+'>');
$("a[href$='.lzh']").prepend('<img src="'+addIconPath+'lzh.png"'+addIconClass+'>');
$("a[href$='.pdf']").prepend('<img src="'+addIconPath+'pdf.png"'+addIconClass+'>');
$("a[href$='.rdf'],a[href$='.rss'],a[href$='.atom']").prepend('<img src="'+addIconPath+'rss.png"'+addIconClass+'>');
$("a[href$='.txt']").prepend('<img src="'+addIconPath+'text.png"'+addIconClass+'>');
$("a[href$='.xls']").prepend('<img src="'+addIconPath+'excel.png"'+addIconClass+'>');
$("a[href$='.zip']").prepend('<img src="'+addIconPath+'zip.png"'+addIconClass+'>');
});
</script>アイコンとして表示する画像がある場所の指定をaddIconPathで行ない、画像に指定するclassはaddIconClassに記述します。また、prependを別の処理に変更することで、画像を後ろに付加したり画像をリンク外に出すことが可能です。対応は以下のようになります。
prepend：アイコン表示位置はリンクの前、アイコンもリンクに含む。- before：アイコン表示位置はリンクの前、アイコンはリンクに含まない。
- append：アイコン表示位置はリンクの後、アイコンもリンクに含む。
- after：アイコン表示位置はリンクの後、アイコンはリンクに含まない。
ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8、Operaを用いて表示を確認しました。