MultiLink.js

»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 の項) で公開します。

10 thoughts on “MultiLink.js

  1. MultiLink.jsを利用させていただこうと考えておりますが、 IE7で動作しません。IE6/IE7での動作確認済みとありますが、ご助言をお願いいたします。

  2. JavaScript を利用している HTML によって、IE6/IE7 で動作しないケースがあったようです。
    報告頂きありがとうございます。修正版をアップしているので確認をお願いします。

  3. Otchy様
    無事動作できました。
    ありがとうございました。

  4. Otchy様

    お世話になっております。
    上記コメントで以前MultiLink.jsの修正版をお願いしましたクニです。
    IE6/IE7では動作しているのですが、IE8では動作しておりません。
    現在の御サイトのサンプルでもIE8では動作していなのですが、再度修正版をお願いできませんでしょうか?
    何卒、よろしくお願いいたします。

  5. 報告ありがとうございます。
    ただ申し訳ないのですが、IE8 で確認出来る環境がないため、どういう状況なのかが把握出来ません。

    エラーの内容とか、表示の状況など解析して報告してもらえれば、問題箇所が推測出来るかも知れないので、詳しい報告を頂けると助かります。

  6. Otchy様
    お世話になっております。
    IE8の開発者ツールにてデバッグを行ったのですが、エラー表示がでませんでした。
    エラーの内容がわからないのですが、いろいろ検索し、素人ながら気になるところをお知らせさせていただきます。
    スクリプト内に143行目に
    if (/*@cc_on!@*/false)
    とあります。この部分が影響していると考えられますでしょうか…
    以下のブログの記事は参考になりますか?
    http://blog.ipuheke.jp/?p=1278

    よろしくお願いいたします。

  7. 確認が遅くなってすいませんでした。
    IE8 の検証環境を作ってスクリプトを修正しました。

    いまの最新版であれば、IE8 でも正常動作するかと思います。
    お試し下さい。

  8. Otchy 様

    ご対応ありがとうございます。
    修正いただきましたが、ダメでした。
    ですが、またIE8の開発者ツールにてデバッグを行った結果、エラー表示されました。
    以下がそのエラー内容です。
    ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    「予期しないメソッドの呼び出し、またはプロパティアクセスです。」
    145行目
    「style.appendChild(d.createTextNode(styleText));」
    ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    145行目にエラーが生じているようです。

    お手数をお掛けします。
    大変便利な機能ですので何卒よろしくお願い出来ればと存じます。

  9. IE8 で確認したはずだったのですが、ちゃんと確認出来ていなかったようです。
    今度こそ大丈夫かと思いますので、現在の最新版をおためし下さい。

  10. Otchy 様
    ご対応ありがとうございます。
    バッチリです。
    ありがとうございました。
    今後ともよろしくお願いいたします。

コメントを残す

メールアドレスが公開されることはありません。