概要
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>があるから好きなのを使うといいよ！
●動作イメージ
●解説
リンクをしたい場所にまず、span タグを追加します。このとき class 属性は “multi-link” としておき、リンクテキストを title 属性に書いておきます。
次に、実際にリンクさせたいサイトを span タグの中に a タグで追加します。
このようにマークアップしておくと、ページの読込み完了時に自動的にポップアップが設定されます。
●JavaScript オフ環境への対応
JavaScript が無効になっている環境で、上記のマークアップを表示すると、こんな見た目になってしまいます。
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 が無効な環境では以下のように表示されます。
もちろん、JavaScript が有効ならちゃんとポップアップします。
カスタマイズ
ポップアップ部分のデザインについては、スクリプト内に css が記述されています。
スクリプト冒頭のスタイル部分を修正すれば、任意のデザインに変更する事が可能です。
動作条件・制限事項・ライセンス
下記のブラウザで動作確認しています。
IE6 / IE7 / IE8 / Firefox3 / Chrome
未確認ですが、IE9 / Firefox2 / Safari / Opera あたりでもそのまま動作すると思われます。
ライセンスは MIT License (日本版 wikipedia の項) で公開します。
MultiLink.jsを利用させていただこうと考えておりますが、 IE7で動作しません。IE6/IE7での動作確認済みとありますが、ご助言をお願いいたします。
JavaScript を利用している HTML によって、IE6/IE7 で動作しないケースがあったようです。
報告頂きありがとうございます。修正版をアップしているので確認をお願いします。
Otchy様
無事動作できました。
ありがとうございました。
Otchy様
お世話になっております。
上記コメントで以前MultiLink.jsの修正版をお願いしましたクニです。
IE6/IE7では動作しているのですが、IE8では動作しておりません。
現在の御サイトのサンプルでもIE8では動作していなのですが、再度修正版をお願いできませんでしょうか？
何卒、よろしくお願いいたします。
報告ありがとうございます。
ただ申し訳ないのですが、IE8 で確認出来る環境がないため、どういう状況なのかが把握出来ません。
エラーの内容とか、表示の状況など解析して報告してもらえれば、問題箇所が推測出来るかも知れないので、詳しい報告を頂けると助かります。
Otchy様
お世話になっております。
IE8の開発者ツールにてデバッグを行ったのですが、エラー表示がでませんでした。
エラーの内容がわからないのですが、いろいろ検索し、素人ながら気になるところをお知らせさせていただきます。
スクリプト内に143行目に
if (/*@cc_on!@*/false)
とあります。この部分が影響していると考えられますでしょうか…
以下のブログの記事は参考になりますか？
http://blog.ipuheke.jp/?p=1278
よろしくお願いいたします。
確認が遅くなってすいませんでした。
IE8 の検証環境を作ってスクリプトを修正しました。
いまの最新版であれば、IE8 でも正常動作するかと思います。
お試し下さい。
Otchy 様
ご対応ありがとうございます。
修正いただきましたが、ダメでした。
ですが、またIE8の開発者ツールにてデバッグを行った結果、エラー表示されました。
以下がそのエラー内容です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
「予期しないメソッドの呼び出し、またはプロパティアクセスです。」
145行目
「style.appendChild(d.createTextNode(styleText));」
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
145行目にエラーが生じているようです。
お手数をお掛けします。
大変便利な機能ですので何卒よろしくお願い出来ればと存じます。
IE8 で確認したはずだったのですが、ちゃんと確認出来ていなかったようです。
今度こそ大丈夫かと思いますので、現在の最新版をおためし下さい。
Otchy 様
ご対応ありがとうございます。
バッチリです。
ありがとうございました。
今後ともよろしくお願いいたします。