- 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で変更できます。
結果はこんな感じでリンクに対して、色々なアイコンが表示されます。
WindowsのIE6とFireFox2、MacintoshのSafari3とFireFox2での動作は確認しています。Javascriptとか得意では無いので、動かなかったらゴメンナサイ。。。と言い訳してみる。よろしければどうぞ。ライセンスはクリエイティブコモンズです。
コメント:2
- show-hey 2008/3/31 月曜日
はじめまして。少し興味を持ったので、コメントさせていただきます。僕もjavascriptは得意ではないので正しい書き方かどうかは分かりませんが、もっと簡単に導入するように、iconize.jsにonload処理を書き込みました。
http://www.show-hey.com/tools/iconize_cus/
少し奮闘させられました。
- tochi 2008/3/31 月曜日
>show-heyさん
正直に言います。。。
attachEvent、addEventListenerの存在すら知りませんでした。(苦笑)
これは便利ですね。
勉強になりました、ありがとうございます。
トラックバック:0
- この記事のトラックバック URL
- http://www.aguuu.com/archives/2007/11/iconizetextlinkswithcsscustomer/trackback/
- トラックバックの送信元リスト
- リンクにアイコンを追加してくれる、 Iconizeを属性セレクタが使用できないIE6用にカスタマイズしてみる - aguuu より