外部リンクをyahoo!みたいにしたい　　　←(外部)

「rel、classを使わないで内部、外部リンクを自動で判断し、
　　　　　　　　外部サイトへのリンクに新しいウィンドウで開くアイコンをつけるjavascript」　　　　　　

「サンプル(このページ)＆設置解説ページ＆ダウンロード」

このページでは"right"と"footer"の中で外部リンクにアイコンが付くように設定してあります

テキストをクリックでは同じウィンドウで開きますが、や　をクリックしてみてください、新しいウィンドウで開きます
外部リンクの a タグにいちいちrel="external"やclass="●●"で設定する必要はありません
target="_blank"も消してください

ご注意：2007.11.2　IEでしか動かない古いファイルを配布していました、再度落としていただくか
　　　　　　　　　　　　 exlink.jsの一番下の行を　window.onload = function(){exlink();}　になおしてください

アメブロ用exLinkセット(exLink.lzh)　ダウンロード　←アメーバブログに設置方法はこちらで

livedoor用exLinkセット(exLink.lzh)　ダウンロード　←livedoor ブログに設置方法はこちらで

ＨＯＭＥ
↑(内部)
スパムメール対策実験
↑(内部)
phpBB2　MOD　導入覚
↑(内部)
迷惑メール対策実験室
↑(外部　class="ynw"指定) 迷惑メール対策実験室
↑(外部)
ＰＤＦファイル(11kb)
↑(PDF　class="nnw"指定)
ＰＤＦファイル(11kb)

動作確認済

Windows XP +　IE6
Windows XP +　opera 8.5
Windows XP +　opera 9.21
Windows XP +　Netscape 7.1
Windows XP +　Firefox 1.5
Windows XP +　Lunascape 3.5.4

Windows Vista +　Firefox 2.0

今回、「外部リンクをyahoo!みたいにしたい」と思い、JavaScriptを勉強して？迷惑メール対策実験室自分なりにやってみました（←リンク途中で行がかわったら？）
pdfTypeを1に設定でＰＤＦファイルはどこにあってもＰＤＦファイルアイコンが付くようにしてありますpdfType=1でもclass="nnw"指定でそこには付かないようにできます

ＨＯＭＥ　　　　　　　　　　　　　←(内部)
スパムメール対策実験　　　　←(内部)
phpBB2OD導入覚　　　　←(内部)
迷惑メール対策実験室 ←(外部)※1 ←IEでみるとバグにより行間がおかしくなります
ＰＤＦファイル(11kb)　　　←(PDF)※1

※1 IEでみるとバグにより行間がおかしくなります
　　スタイルシートに手を加えることで直ります　　修正方法＆サンプルページ

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

目的　　target="_blank"という書き方がXHTML 1.1 や XHTML Basicに
　　　　準拠していないので、JavaScriptを使って自動で外部サイトへの
　　　　リンクに外部リンクを示すアイコンをつけ、アイコンをクリックする
　　　　事で新しいウィンドウで開くようにし、サイトを訪れた方に開き方を
　　　　選択してもらう
　　　　リンクタグにいちいちrel="external"やclass="****"などを
　　　　書き込まなくてもそのままで既存サイトに導入できるよう目指しました

出来る事
　　　　○　自動でリンクをチェックして外部リンクの場合アイコンをつける
　　　　○　IDを指定(複数可)することにより適用する場所を設定
　　　　○　PDFファイルへのリンクに新しいウィンドウで開くアイコンをつける
　　　　○　classを指定することで適用範囲外でもアイコンをつけたり、適用
　　　　　　範囲内でもアイコンをつけないように設定
　　　　※　バナー、アイコン等、画像からのリンクにはアイコンはつきません

設置方法
　　　　exlink.lzhをダウンロードします　ダウンロード exlink.lzh (9.9K)

このようにファイルを他のサーバーに置いてある場合　　　　　　↑↑
アイコンが付いてしまいますのでclass="nnw"指定をします
<a href="http://***.com/js/exlink.lzh" class="nnw">ダウンロード</a>
または、画像からリンクを貼るとアイコンはつきません

　　　　　exlink.js　をエディタで開き、以下の個所を設定します
　　　　　　　　（設定しないでもそのままあげても動くとは思います）
　　　　　　　　var myHost = location.hostname;
　　　　　　　　　　　このままでうまくいかない場合は自分のドメインを設定してください
　　　　　　　　　　　ここの場合　var myHost = "nikkei-azabu10.com";
　　　　　　　　　　　　　　　　　　　※複数指定不可です

　　　　　　　　var myArea = "";
　　　　　　　　　　　ページ全部で適用する場合はそのまま
　　　　　　　　　　　<div id="main"> 内のみに適用　 var myArea = new Array("main");
　　　　　　　　　　　このページのように２つ以上のIDを指定する場合
　　　　　　　　　　　　　　　　　 var myArea = new Array("right","footer");
　　　　　　　　　　　　　　　　　　　※複数指定可能です

　　　　　　　　var exLink = "<img src='images/link-icon.gif' width='11'
　　　　　　　 height='10' alt='リンクを新しいウインドウで開きます' title=
　　　　　　　 'このアイコンをクリックするとリンクを新しいウインドウで開きます'
　　　　　　　 rel='nofollow'>";
　　　　　　　　　　　外部リンクアイコン画像のおいてある場所、横、縦、等を指定
　　　　　　　　　　　rel='nofollow'はソースには出ないので大丈夫かと思うのですが
　　　　　　　　　　　一応おまじないのために書いてあります
　　　　　　　　　　　ファイル構成をそのまま使用の場合はこのままでＯＫです

　　　　　　　var pdfType = 1;
　　　　　　　　　　　pdfファイルに新しいウィンドウで開くアイコンをつける場合は1
　　　　　　　　　　　var pdfType = 0;　でつけないようにします
　　　　　　　　　　　pdfファイルの場合は内部・外部リンク、myAreaは関係ありません
　　　　　　　　　　　全部につけるか、つけないかです
　　　　　　　　　　　部分的に付けたくないファイルはclass="nnw"指定で

　　　　　　　　var exPdf = "<img src=　・・・・・
　　　　　　　　　　　pdfアイコン画像の設定、exLinkを参考に

　　　　　　　　var yesNW = "ynw";
　　　　　　　　　　　適用範囲外でもclass="ynw"を記入することでアイコンをつける
　　　　　　　　　　　<a href="http://**.com/" class="ynw" >●■○</a>

　　　　　　　　var noNW = "nnw";
　　　　　　　　　　　適用範囲内でもclass="ｎnw"を記入することでアイコンをつけない
　　　　　　　　　　　<a href="http://**.com/" class="nnw" >○×▲</a>

　　　　　　　　var myLimit = 200;
　　　　　　　　　　　１ページのリンクをチェックする限度個数　--　一応安全のため

　　　　　サイトの文字コードに合わせて保存してexlinkフォルダーごとアップする
　　　　　　　　　psdフォルダーは必要ありません、削除可

　　　　　HTMLを開きます(念のため現在のファイルは退避しておいてください)
　　　　　　　　 <head>内に以下を記入します
　　　　　　　　 <script type="text/javascript" src="exlink/js/exlink.js"></script>
　　　　　　　　exlink/js/exlink.jsの部分はファイルのある場所を記入してください
　　　　　　　　　http://～　記入した方が良いかも

　　　　　　　　 aタグの中にtarget="_blank"を記入していれば全部削除する
　　　　　　　　　　※外部リンクに rel="external"を記入されている場合、
　　　　　　　　　　　消しても、消さなくてもかまいません（影響しません）
　　　　　　　　　　　 target="_blank"だけは消してください

　　　　　HTMLファイルをアップします

コメントはこちらへお願いします
mac・Safariでのチェック環境がありません
お知らせいただけると助かります m(__)m

　　こちらにも無料アイコンがあります
　　http://sw-guide.de/wordpress/plugins/link-indication/
　　ここからimages.zip (22k)をお借りしてきます（真ん中あたりにあります）
　　解凍するといろいろと使用可能なアイコンがありますのでどれでも選んでください
　　mini-image-box
　　Site-Nav Symbole の WindowOpen 10 FensterAuf 11　あたり
　　これらや他で手に入れたアイコンを使用する場合は、exLink 、exPdf　の画像名、
　　横、縦、を書き換えて画像をimagesフォルダーに保存してください

注　意
　　　　● 初期設定 var myHost = location.hostname; のままでうまくいかない場合
　　　　　　このような場合はvar myHost = "あなたのドメイン";あるいは
　　　　　　var myHost = "ドメイン/あなたのフォルダー";等で設定してください
　　　　　　 "□□□.geocities.jp/○○○";サイトを特定できる部分を記入ください

　　　　●　他のJavaScriptに影響する場合があります
　　　　　　　初期設定 var myArea = "";で使用の場合
　　　　　　　mootoolsやSlimbox(Lightboxと同じ動き)という画像ギャラリを使用して、
　　　　　　　拡大された画像にもアイコンがついてしまいます（ブラウザーによっては）
　　　　　　　この場合、ページ内の１番外側のIDを設定してＯＫな場合もあります
　　　　　　　たとえば var myArea = new Array("all"); のように

今後できれば
　　　　　　・target="_blank"ではなくてwindow.open で開くようにしたい
　　　　　　　でも、target属性が悪いんじゃなくて閲覧者が選択できないのがNGの理由、
　　　　　　　だとすれば、外部リンクを示すアイコンもつけているし、新しいウィンドウで
　　　　　　　開くかどうかの選択もできるのでこのままでもいいような・・・・
　　　　　　・１度全部のリンクをチェックした後で　myArea が設定したあった場合に
　　　　　　再度、myArea個数分チェックを繰り返す無駄なことが解消できれば・・
　　　　　　・onloadがかち合っているとうまくいきません、いろいろとやってはみたの
　　　　　　　ですが・・・・

ご利用にあたって
　　　　　　・個人・商用サイト共にご自由に使用ください
　　　　　　・著作権表示を除く、メッセージ、スクリプトの改変などはご自由に
　　　　　　・再配布はしないでください
　　　　　　・当サイトへのリンクはどのページでもご自由にどうぞ
　　　　　　・使用の結果生じたいかなる損害に対しても当方は責任を持ちません
　　　　　　　ご自身の責任でお使いください

　　
↑　画像からのリンクにはアイコンは付かないようになっています　↑
　

ＨＯＭＥ　　　　　　　　　　　　　　　←(内部)
スパムメール対策実験室　　　　←(内部)
phpBB2　MOD　導入覚書　　　　←(内部)
迷惑メール対策実験室　　　　　←(外部)※1 ←IEでみるとバグにより行間がおかしくなります
yahoo! 　　　　　　　　　　　　　　　←(外部 class="ynw"指定)
　　　　↑↑アイコンが重なる場合はIDでの指定と class="ynw"指定が重複しています、classを削除してください

は外部サイトへのリンクです（アイコンをクリックすると新しいウィンドウ・タブで開きます）
↑ページの下あたりにこんなコメントを書いておけばより親切だと思います　

正確ではありませんが

↑↑正確ではありませんが処理時間の目安（自己チェック用-見る方の環境で変化しますので気にしないで下さい）

外部リンクをyahoo!みたいにしたい ←(外部)

「 サンプル(このページ)＆設置解説ページ＆ダウンロード 」

外部リンクをyahoo!みたいにしたい　　　←(外部)

「サンプル(このページ)＆設置解説ページ＆ダウンロード」