
MultiLink.js2009-11-05
概要
1つのリンクで複数サイトにリンクさせるためのスクリプトです。複数のリンクがポップアップして表示されます。
特徴
- スクリプトの導入は script タグを 1 行追加するだけ
- リンク部分は簡単なマークアップで記述できる
- JavaScript が無効な環境でも意味が通じるマークアップが可能
導入方法
上記 Download よりスクリプトをダウンロードしたら、head タグの中で下記のように読み込みます。<script type="text/javascript" src="multilink.js"></script>
マークアップ
●単に動作させるだけの場合いろんな<span class="multi-link" title="検索エンジン"> <a href="http://www.google.com">Google</a> <a href="http://www.yahoo.com">Yahoo!</a> <a href="http://www.bing.com">bing</a> </span>があるから好きなのを使うといいよ!
●動作イメージ
いろんな Google Yahoo! bing があるから好きなのを使うといいよ!
●解説
リンクをしたい場所にまず、span タグを追加します。このとき class 属性は "multi-link" としておき、リンクテキストを title 属性に書いておきます。
次に、実際にリンクさせたいサイトを span タグの中に a タグで追加します。
このようにマークアップしておくと、ページの読込み完了時に自動的にポップアップが設定されます。
●JavaScript オフ環境への対応
JavaScript が無効になっている環境で、上記のマークアップを表示すると、こんな見た目になってしまいます。
いろんな Google Yahoo! bing があるから好きなのを使うといいよ!
span タグの中については、a タグ以外の記述を全て無視するように動作するため、下記のようなマークアップをすることで、JavaScript が無効な環境でも意味の通じるように表示することができます。
いろんな<span class="multi-link" title="検索エンジン">検索エンジン( <a href="http://www.google.com">Google</a>・ <a href="http://www.yahoo.com">Yahoo!</a>・ <a href="http://www.bing.com">bing</a> )</span>があるから好きなのを使うといいよ!
この場合、JavaScript が無効な環境では以下のように表示されます。
いろんな検索エンジン(Google・Yahoo!・bing)があるから好きなのを使うといいよ!
もちろん、JavaScript が有効ならちゃんとポップアップします。
いろんな検索エンジン(Google・Yahoo!・bing)があるから好きなのを使うといいよ!
カスタマイズ
ポップアップ部分のデザインについては、スクリプト内に css が記述されています。スクリプト冒頭のスタイル部分を修正すれば、任意のデザインに変更する事が可能です。
動作条件・制限事項・ライセンス
下記のブラウザで動作確認しています。IE6 / IE7 / IE8 / Firefox3 / Chrome
未確認ですが、IE9 / Firefox2 / Safari / Opera あたりでもそのまま動作すると思われます。
ライセンスは MIT License (日本版 wikipedia の項) で公開します。