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

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

投稿者: tochi
2007/11/22 木曜日 15:03:24
ウェブ

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

まずは下記からZIPファイルをダウンロードします。iconize.zip
解凍してできたiconizeフォルダを適当な場所にアップします。
iconizeを適用したい画面のヘッダー部分でiconizeフォルダ内のiconize.cssとiconize.jsへのリンクを追加します。ファイルへのパスは自分の環境にあわせてください。
1
2
3
4
<head>
<link href="iconize.css" rel="stylesheet" type="text/css"/>
<script src="iconize.js" language="javascript"></script>
</head>
次にbodyタグのonloadでIconize.AddIcons()を読み込みます。
1
<body onload="Iconize.AddIcons()">
あとは、追加した画面でリンクを設定すればアイコンが自動で追加されます。レイアウトはiconize.cssで変更できます。