外部リンクをyahooみたいにしたい 17

完成！？外部サイトへのリンクに新しいウィンドウで開くアイコンを自動でつけてyahooみたいにしたいってことでやってきましたが、なんとか思ったとおりに動くものができました。
でも、まだ綺麗ではないし、一度チェックしてから再度チェックしなおすという無駄な部分はそのままなので、自分では納得していないのですが・・・・
これ以上考えても良い考えも浮かびそうにないし・・・
一度公開してツッコミを入れてもらった方がよさそうな気がします。

「target="_blank"を使わないで外部サイトへのリンクに
　　　　　javascriptを使って自動で新しいウィンドウで開くアイコンをつける」
↓サンプル＆設置解説＆ダウンロード↓
http://www.nikkei-azabu10.com/exlink/

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

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

外部リンクをyahooみたいにしたい 16

JavaScriptにはサブルーチンがない？
関数 しかないようです・・・・

イメージが浮かびません・・・・
同じようなことを何度も繰り返しているようで
しかも途中まで処理しているのに再度最初からやり直すような感じになってしまっています？
スマートに書くことができないのです

ただ、１ページ全部に適用するのでしたら、たぶん完成ですがこれだけではあまり使い道がないと思います
DIV の ID を指定するのはごちゃごちゃしてメチャクチャになってしまっていますし、うまくもいっていません

もっと簡潔に綺麗にならないことにはどうしようもありません

外部リンクをyahooみたいにしたい 15

作り始めて２週間以上経ってしまいました・・・・
もっと簡単かと思っていたのですが勉強させられるところが多いです
ＪＳだけでなくＣＳＳも再度勉強させられています・・・

現在は、「pdfファイルにアイコンを付けて新しいウィンドウで開く」までできました
あとは内部か外部か判定してアイコン付けて新しいウィンドウで開くようにするだけです

&& や ||　で条件分けが「なんで～」って思うほど悩まされています

先日書きました行間の件はIEのバグのようでした
こちらはスタイルシートでなんとかなりました

あと、どのくらいで完成でしょうか・・・？

外部リンクをyahooみたいにしたい 14

いざアイコンにリンク部分をつけると同じところにズラズラ～っとアイコンが付いて手に負えなくなっておりました・・・

var myLinks = document.getElementsByTagName("a");
for(i = 0; i < myLinks.length; i++){
の中で、アイコンにリンクを付けて貼り付けるとトータルのリンク数が増えていたのですね・・・
リンクを貼り付けたら i を +1 しなくてはいけなかったようです

for文の中にごちゃごちゃ書きすぎたのでおかしくなっていたと思いこみ、
あれこれ悩んでいましたが・・・・
アイコンの隣に i を書き出すようにして数えてようやく意味がわかりました

変数が変っていくなんて思ってもいませんでした
わかってみれば・・・・

にしてもIEって処理遅くありませんか？
他のブラウザーに比べて処理が終わるまでに間があります・・
テストページで30個ほどしかリンク箇所がないのに・・・
本番でリンク箇所が増えたらどうなるんでしょ？？？

怪我の功名ではないですが
リンクチェック数に限度を設定しました

外部リンクをyahooみたいにしたい 13

なかなか進みません・・・ふっ

今度はIEでアイコンが付いた行がCSSで指定している行間と変ってしまうことがあります
それも全部ではなくてある一部に限ってなんですが原因がわかりません？？

外部リンクをyahooみたいにしたい 12

イメージファイルを弾こうとして
if(myLink.indexOf("<img") == -1){
で試したのですが
ブラウザーによって違っているので・・・
"<IMG"にしてみると・・・
これもブラウザーによって違ってきます？？
良かったものがダメになったり、ダメだったのが良くなったり・・？

"<img src="これでもダメでした・・・
訳わかりません？？？？

皆さんはイメージファイルをどうやってチェックしているのでしょうか？？

外部リンクをyahooみたいにしたい 11

やはり完成にはまだまだです

確認したところ・・・
表示されたのはIE6とLunascape3だけでした・・・？
Opera8、Netscape7、Firefox1.5ではだめでした・・・？

少し手直しして確認
やっと全部で動作するようになったのですが
今度はバナー（画像）に
IE6とLunascape3、Opera8はアイコンが付いてしまいます
Netscape7、Firefox1.5では付かないのに？

CSSのときもそうですがIEだけで作業していてはダメですね
見直し見直し・・・

IE7を導入してしまうとIE6でチェックできなくなってしまうので
IE7でも確認できていません
mac環境も近くにありません
どうなんでしょ・・・？？

外部リンクをyahooみたいにしたい 10

ほぼ完成しました？
実験サイトでは期待通りの動きを見せてくれるようになりました

思いつくまま書いていますので
少し？・・・だいぶ整理して重複部分を削除したり綺麗に書き直さないと恥ずかしくてお見せできませんが・・・

悪い癖で完成もしていないくせに
また、あれこれ思いついてしまっています

>var nNW = "nnw"  適用ID内でもclassに、これがあれば除外・・・
>これって必要ないような？？気がするけど・・・
>使う場面が思い浮かばない・
って先日書いたのですが・・・ありました！
○○.lzh、××.jsみたいに自分のですが別サーバーに置いてあるような場合
これって必要ですね

あと、pdfファイルにアイコンつけるって先日書きましたが
ついでにダウンロードアイコンも隣につけたら良さそう・・じゃないですか？
できるかどうかは不明ですが

・・・・・・

外部リンクをyahooみたいにしたい 9

依然DOMの勉強が続いています

今はアンカーテキスト部分を画像に交換する所でつまずいています

<A Href="http://www.***.com">リンク</A>を
<A Href="http://www.***.com"><IMG src="http://www.*****.jp/***/exlink.gif" border="0" width="12" height="10"></A>
に、したいんです

なんか１回で変更する方法があっても良さそうなのですが
innerHTMLでreplaceChildなんかを使ってテストしているのですがうまくいきません？？？
これ自体考え方違っていたりして・・・？？

createElement("a")、href、setAttribute("target","_blank")を使って新しく組み立てたほうがいいのでしょうか？

これなら何とかなりそうなのですがスマートではなさそうだし・・・無理やりぽく見える・・・・？？

外部リンクをyahooみたいにしたい 8

少し整理してみました

var myHost = "*****.com"  ドメインを指定
var yID = "*****"  適用するID名を指定
var yNW = "ynw"  適用ID外でもclassに、これがあれば適用
var nNW = "nnw"  適用ID内でもclassに、これがあれば除外

for (リンク部分を取り出す) {
  if (PDFファイルの場合)
　　　　{PDFアイコンをつける}
　else　　PDFファイル以外の場合
    if ("ynw"があった場合)
　　　　{外部リンクアイコンをつける}
　　else　"ynw"がない場合
    　　if (リンクが外部リンクの場合 && imgが無い場合) {
        　　 if (適用ID内の場合 && "nnw"がない場合)
　　　　　　　　　　{外部リンクアイコンをつける}
  }
}

こんなんで良いと思うのですが・・・？

var nNW = "nnw"  適用ID内でもclassに、これがあれば除外・・・
これって必要ないような？？気がするけど・・・
使う場面が思い浮かばない・・・

それにしても変数名の適当な付け方・・・才能ないな・・・

前回のでアイコンをつけることは可能だと思うのですが
アイコンをクリックしたときに新しいウィンドウで開く設定が・・・
なんかうまくいっていません・・・？？？
javascriptリファレンスを片っ端から見ないとダメ？？？
なんか使えそうなのないかな？

外部リンクをyahooみたいにしたい 7

>複数のJavaScriptプログラムを利用すると動作がおかしくなったりするのは「グローバル変数」の重複によるものです。
>まずは無条件に、JavaScriptの変数はvar命令で宣言すると覚えておくことを強くお勧めしたい。
関数名の重複を避ける意味でもvarで変数を定義して「ローカル変数」にしておいた方が後々苦労しないで済みそうです
かっこつけ、便利以外で必要だったのですね・・・
勉強になりました・・・

とりあえず外部リンクにアイコンをつけるまで

window.onload = function() {

   var myHost = location.hostname;  // myHostに現ページのホスト情報を代入
   var myLink
   var myComp

   for(var i=0; i < document.links.length; ++i) //リンクの数だけ繰り返し
{
  myLink = document.links[i].hostname; //リンク先のホスト情報
  myComp = myLink.indexOf(myHost,0);　//ホスト情報比較
   if(myComp == -1){　//　-1 myLinkの中にmyHost情報が無い場合--外部リンクの時
    document.links[i].innerHTML=document.links[i].innerHTML+"<img src=\"http://www.******.jp/images/link-icon.jpg\" width=\"13px\" height=\"10px\" alt=\"外部リンクアイコン\" title=\"このアイコンをクリックするとリンクを新しいウインドウで開きます\">"; //アイコンをくっつける
       }
   }
}

どうでしょうか？？

結果は失敗・・・？！

続きを読む "外部リンクをyahooみたいにしたい 7"

外部リンクをyahooみたいにしたい 6

どのような値で戻ってくるかわからないと書けないので以下で実際に実験してみました

<html>
<head>
</head>
<body >
<a href="http://www.nantoka.com/doushita/index.html">JavaScriptテスト</a><br>
&lt;a href=&quot;http://www.nantoka.com/doushita/index.html&quot;&gt;JavaScriptテスト&lt;/a&gt;<br><br>

<script language="JavaScript">
<!--

for(var i=0; i < document.links.length; ++i) {
document.write( "location.host　　　　　" , location.host    ,"<br>");
document.write( "location.hostname　　　　　" , location.hostname    ,"<br>");
document.write( "location.href　　　　　" , location.href    ,"<br>");
document.write( "links.length　　　　　" , document.links.length    ,"<br>");
document.write( "links.host　　　　　" , document.links[i].host    ,"<br>");
document.write( "links.hostname　　　　　" , document.links[i].hostname    ,"<br>");
document.write( "links.href　　　　　" , document.links[i].href    ,"<br>");
document.write( "links.innerHTML　　　　　" , document.links[i].innerHTML    ,"<br>");

var exLink = document.links[i].innerHTML;
exLink=exLink+"<img src=\"http://www.■■■.jp/images/link-icon.jpg\" width=\"13px\" height=\"10px\" alt=\"外部リンクです\">";
document.write( "exLink　　　　　" , exLink    ,"<br>");
}
// -->
</script>
</body>
</html>

結果は

外部リンクをyahooみたいにしたい 5

>リンクの個数を参照する際には、document.links.lengthを使用
anchors.lengthじゃなくてこっちね

document.links.host･････････リンク先URLのホスト情報
これとlocation.hostを比べればOK?

setAttribute
属性を追加し、値を設定する
これでtarget="_blank"を追加する
window.openを使うべきなのでしょうけど・・・
まっ、新しいウィンドウで開くことを選んでアイコンをクリックするわけだからこれでもいいかな？
１番の理由はこっちの方が楽そう・・・

BASICでは最初に変数を定義しなくてはいけなかったのですが・・
JavaScriptではいきなり使用しても良いみたい
・・・今は、JavaScriptと、言うより
変数名で悩んでいます・・・・

昔はA$,B$,C$なんて恐ろしい変数を使って千行近いプログラムを書いていました
面倒だし、自分だけしか見ないから・・
なんて言い訳しながら書いていて後で訳わからなくなって困った記憶があります

現在私の書いたCSSのid,class名なんか見ても、見られたら恥ずかしいような名前を付けてしまっていました・・・
面倒なんかじゃなく、名前をつけるセンスがなかっただけだったようです

CGIとかで最初に環境・設定を変数に入れておけば後はさわらなくて良いって便利な書き方を多くの方がされています
私もかっこつけてそうしようかな・・・
できるかどうかもわからないのに・・・
たいした行数にならないはずなのに・・・
途中で余計なことに興味がいってしまうのが私の短所です・・・

変数名・・・どうしよ～？？？

WebがグンとよくなるJavaScript /デーブ・ソー/著
この本買ってみようかな・・・

外部リンクをyahooみたいにしたい 4

JavaScriptリファレンスとか本を立ち読みして少し調べました
やりたいことがわかっているので逆引きJavaScriptなんかのサイトも便利です

とりあえずは・・・

location.host
現在ページURLのホスト情報がわかる
これとリンク先のURLを比べれば内部リンクか外部リンクかわかりそう？

おまけに
>ページのアンカー数を取得するにはanchors.lengthを使用します。
リンク箇所を1つずつ取り出せる？

location.links[i]
リンクを参照します
これを使えば内部リンクと外部リンクを分けることができそう
自分では内部リンクは　../index.html なんて書いているけど
これだと？どうなる？

indexOf
文字列を検索します
location.hostと比べて内部リンクか外部リンクかチェックできそう？
BASICのときはmatch関数を使った記憶が・・・？

>既存のリンク表示を自分の好きな物に変更する時は、innerText と innerHTML を用いて記述します

for文で1つずつリンク箇所を取り出す
if文でそのリンクが内部リンクか外部リンクか判断
外部リンクだったら後ろにアイコンを付けて、次へ
内部リンクだったらなにもしないで次へ

こんな感じで良いような・・・気がする？
なんとかなりそう？？？？？

外部リンクをyahooみたいにしたい 3

IEでも外部リンクアイコンを表示させるためには

a.outer {
padding-right: 14px;
background: url(http://www.アイコン画像のおいてある場所) no-repeat right
}

CSSでリンクにclass="outer"を付ければ外部リンクのアイコンを自動で？つけることができる
ただアイコンが付くってだけ・・

今回調べていて
target="_blank"はアクセシビリティ上よくないとのこと
（XHTML1.1からは非推奨、HTML読み上げソフトを利用していると、どこを読上げているかわからなくなります・・）
「外部リンクは新しいウィンドウで開く」主義の私としては寝耳に水状態・・・
どうしましょ？？気が付いてよかった

上のCSSではアイコンが付くので外部リンクだとはわかるのですがtarget="_blank"で指定してあるので却下！

やっぱり、外部リンクをyahooみたいにしたい！！

続きを読む "外部リンクをyahooみたいにしたい 3"

外部リンクをyahooみたいにしたい 2

調べてみるとCSSでやっている方がおられました

外部リンクにアイコンを付ける
http://cfdn.blog1.fc2.com/blog-entry-31.html
div.section a[href^="http:"]:before,
div.section a[href^="https:"]:before {
  content : url("使用する外部リンクアイコン画像のパス");
  vertical-align : middle;
}

div.section a[href^="自分のサイトのアドレス"]:before {
  content : "";
  vertical-align : baseline;
}

2005-01-10 だって・・・
WIN95のころからやっていたのに私は先週気が付いた・・・
恥ずかしいかぎりです・・・

使用するアイコンは・・・

http://sw-guide.de/wordpress/plugins/link-indication/
ここからimages.zip (22k)をお借りしてきます
解凍するといろいろと使用可能なアイコンがありますのでどれでも選んでください

http://www.coolwebwindow.com/weblife_column/coolweb/000157.php
こちらでも外部リンクアイコンをダウンロードできます＆説明もあります
商用利用も可能でpsdファイルもありますので便利

でも・・・・
IEは最新のIE7でも未対応で何も変りません。
・・・IEで使えないなんて・・・・

外部リンクをyahooみたいにしたい

先週気が付いたのですが・・・
Yahoo!カテゴリでこんなんなっていたの知っていましたか？
文字をクリックすると同一ウィンドウで開き、
アイコンをクリックすると新しいウィンドウでリンクが開くんです。

Yahoo!カテゴリは記憶にないほど使ったことがなったので
今まで知りませんでした。

「外部リンクは新しいウィンドウで開く」主義の私としては
普段使っているGoogle検索で同一画面で開かれていちいち戻るで検索画面に戻るのにいらいらしていました。
そういえば、私が作ったサイトはすべて外部リンクは新しいウィンドウで開く様に作っていたのですが、新しいウィンドウで開くのは「うっとーしーーー」って言われたことがあります。

サイトを運営する側としては
これは外部へのリンクですよ（アイコンをつける）
同じウィンドウで開きますか？新しいウィンドウで開きますか？選んでリンクに飛んでください
って、すごく良いことなのではないでしょうか・・・・
Yahoo!カテゴリを見て考えさせられました・・・

・・・ソースを見ると

続きを読む "外部リンクをyahooみたいにしたい"