リンクにアイコンを追加してくれる、 Iconizeを属性セレクタが使用できないIE6用にカスタマイズしてみる

Webで使用するリンク先には、HTML以外にも、PDFとかMP3とか色々な物がありますが、リンクを押す前に視覚的にそれらが何にリンクしているか分かると良いなと思います。リンクを押してみたら、PDFが開いて、時間がかかってイラッとした経験がある人も多いかと。そんな時に便利なライブラリとして、画面上のリンクのURIから自動的にアイコンを追加してくれるIconize Textlinks with CSS（Thanks pooliestudios）という物があります。でも、これ属性セレクタを使っているので対応していない、WindowsのIE6とかのブラウザではちゃんと動作しないのです。。。残念。そこで、属性セレクタを使わずにJavascriptを使用して作り変えてみました。使用方法を簡単にご説明。

  1. まずは下記からZIPファイルをダウンロードします。iconize.zip
  2. 解凍してできたiconizeフォルダを適当な場所にアップします。

  3. iconizeを適用したい画面のヘッダー部分でiconizeフォルダ内のiconize.cssとiconize.jsへのリンクを追加します。ファイルへのパスは自分の環境にあわせてください。

    <head><br /> <link href="iconize.css" rel="stylesheet" type="text/css"/><br /> <script src="iconize.js" language="javascript"></script><br /> </head>

  4. 次にbodyタグのonloadでIconize.AddIcons()を読み込みます。<body onload="Iconize.AddIcons()">

  5. あとは、追加した画面でリンクを設定すればアイコンが自動で追加されます。レイアウトはiconize.cssで変更できます。

結果はこんな感じでリンクに対して、色々なアイコンが表示されます。

PDFファイル

MP3ファイル

WindowsのIE6とFireFox2、MacintoshのSafari3とFireFox2での動作は確認しています。Javascriptとか得意では無いので、動かなかったらゴメンナサイ。。。と言い訳してみる。よろしければどうぞ。ライセンスはクリエイティブコモンズです。