OTCHY.NET

»Download

概要

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 / Firefox3 / Chrome
未確認ですが、IE8 / Firefox2 / Safari / Opera あたりでもそのまま動作すると思われます。

ライセンスは MIT License (日本版 wikipedia の項) で公開します。