Home JavaScript Greasemonkey PHP

MultiLink.js2009-11-05



»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 が無効な環境では以下のように表示されます。
いろんな検索エンジン(GoogleYahoo!bing)があるから好きなのを使うといいよ!

もちろん、JavaScript が有効ならちゃんとポップアップします。
いろんな検索エンジン(GoogleYahoo!bing)があるから好きなのを使うといいよ!


カスタマイズ

ポップアップ部分のデザインについては、スクリプト内に css が記述されています。
スクリプト冒頭のスタイル部分を修正すれば、任意のデザインに変更する事が可能です。

動作条件・制限事項・ライセンス

下記のブラウザで動作確認しています。
IE6 / IE7 / IE8 / Firefox3 / Chrome
未確認ですが、IE9 / Firefox2 / Safari / Opera あたりでもそのまま動作すると思われます。

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