- ベストアンサー
リンクにカーソルを合わせると文字が変わる方法
- FC2ブログを使っています。プラグインのリンクにカーソルを合わせると文字が変わる方法を教えてください。
- <html><head><title>マウスが重なったら文字のスタイルを変える</title><script Language="JavaScript"><!-- function change(o,v) { if (navigator.userAgent.indexOf("Firefox") > -1) { o.textContent = v; }else{ o.innerText = v; } } // --></script></head><body bgcolor="white"><a href="#" id="myText" onMouseover="change(this,'Hello World !!')" onMouseout="change(this,' マウスを乗せて')">マウスを乗せて</a></body></html>
- この方法でおかしな点はないでしょうか？ブログが重くならないでしょうか？おかしな点や他の方法などありましたらご教授お願いします。
- patinkozuk
- お礼率63% (453/711)
- ブログ
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
#1です。補足を拝見しました。 this.innerHTMLを使う方は <script type="text/javascript">～は書かなくて良いです。 関数は呼び出していないので。 ●this.innerHTMLを使うタイプ <a href="#" id="myText" onmouseover="this.innerHTML='Hello World !!'" onmouseout="this.innerHTML='マウスを乗せて'">マウスを乗せて</a> ●change(this,***)のような関数を呼び出すタイプ <script type="text/javascript"> <!-- function change(o,v){ o.innerHTML = v; } //--> </script> <a href="#" id="myText" onmouseover="change(this,'Hello World !!')" onmouseout="change(this,'マウスを乗せて')">マウスを乗せて</a> HTML内のchange(this,***)という関数で this（自分自身） と 'Hello World !!' を渡して、 それを function change(o,v) が this → o 'Hello World !!' → v として受け取って（代入して）、 こちらで処理を行なう、という感じでしょうか。 HTMLは構造を書くためのものなので、 スクリプトはchange()の用に別に記述するべきなのですが、 今回のような簡単なものは 関数を呼び出さなくても出来ますよ、という意味で ２つ回答させていただきました。
その他の回答 (2)
- zeff
- ベストアンサー率69% (137/198)
＞「ブログが重たくなる」や見た目やSEO対策的なこと いや、ゴメンナサイ。そこまでの知識は無いです； ただjavascriptが長くなる場合は 外部ファイル化したほうがいい、というくらいで。 JavaScriptの外部ファイルについての疑問です。 - 質問・相談ならMSN相談箱 http://questionbox.jp.msn.com/qa1613604.html SEOについてはこんな記事を見つけました。 javaScriptの外部ファイル化 - FC2ブログのテンプレート工房 http://10plate.blog44.fc2.com/blog-entry-147.html Java scriptはSEOに不利？ 外部ファイル化の説明 ホームページやブログのSEO検索エンジン対策 http://kokokumaster.fc2web.com/accessup/seo/java.html
お礼
＞zeff様 ご回答ありがとうございます。 とても参考になりました！
- zeff
- ベストアンサー率69% (137/198)
簡単にinnerHTMLで良いのではないでしょうか。 if (navigator.userAgent.indexOf("Firefox") > -1) { o.textContent = v; }else{ o.innerText = v; } } この部分はたぶん FirefoxならtextContentを、 それ以外（たぶんInternetExplorer)なら innerTextを使うという指定。 「たぶん」が多くてスミマセン。よく判らないので； 自分ならこうします。 <script type="text/javascript"> <!-- function change(o,v){ o.innerHTML = v; } //--> </script> HTMLは <a href="#" id="myText" onmouseover="change(this,'Hello World !!')" onmouseout="change(this,'マウスを乗せて')">マウスを乗せて</a> これだけなのでわざわざ関数にしないで、 <a href="#" id="myText" onmouseover="this.innerHTML='Hello World !!'" onmouseout="this.innerHTML='マウスを乗せて'">マウスを乗せて</a> でおしまい。Firefox3.6とIE6で確認しました。
補足
＞zeff様 ご回答ありがとうございます。 あまり詳しくないのですわからないのですが、 <script type="text/javascript"> <!-- function change(o,v){ o.innerHTML = v; } //--> </script> の下に <a href="#" id="myText" onmouseover="this.innerHTML='Hello World !!'" onmouseout="this.innerHTML='マウスを乗せて'">マウスを乗せて</a> でいいのでしょうか？ <a href="#" id="myText" onmouseover="change(this,'Hello World !!')" onmouseout="change(this,'マウスを乗せて')">マウスを乗せて</a> の場合となにが違うのでしょうか？ 無知でもうしわけないですが、ご教授お願いします。
補足
＞zeff様 ご回答ありがとうございます。 私の知識では全く何を言っているのかわからないのですが、他の方からすれば大変わかり易いご説明だと思います。 とりあえず私は「カーソルを合わせると文字が変わる方法」さえわかればいいのでまた何かの機会にこのご説明を読んで勉強したいと思います。 それと、私の補足で「this.innerHTMLを使うタイプ」と「change(this,***)のような関数を呼び出すタイプ」では何が違うのか聞きましたが、構造？的なことではなく「ブログが重たくなる」や見た目やSEO対策的なこと等を聞きたくて補足しました。 あらためて ＞●this.innerHTMLを使うタイプ ＞●change(this,***)のような関数を呼び出すタイプ ではどのような違いがあるのでしょうか？