FC2ブログを使っています。プラグインのリンクにカーソルを合わせると文字が変わる方法を教えてください。自分で調べると下のようなものを見つけました。マウスが重なったら文字のスタイルを変える -1) { o.textContent = v; }else{ o.innerText = v; } } // --> マウスを乗せてこの方法でおかしな点はないでしょうか？ブログが重くならないでしょうか？おかしな点や他の方法などありましたらご教授お願いします。

リンクにカーソルを合わせると文字が変わる方法

解決済

質問者：patinkozuk
質問日時：2010/02/25 21:21
回答数：3件

FC2ブログを使っています。

プラグインのリンクにカーソルを合わせると文字が変わる方法を教えてください。
自分で調べると下のようなものを見つけました。

<html>

<head>

<title>マウスが重なったら文字のスタイルを変える</title>

<script Language="JavaScript"></script>

</head>

<body bgcolor="white">

<a href="#" id="myText" onMouseover="change(this,'Hello World !!')" onMouseout="change(this,' マウスを乗せて')">マウスを乗せて</a>

</body>

</html>

この方法でおかしな点はないでしょうか？
ブログが重くならないでしょうか？

おかしな点や他の方法などありましたらご教授お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： zeff#1
回答日時：2010/02/27 11:33

#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">

</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()の用に別に記述するべきなのですが、
今回のような簡単なものは
関数を呼び出さなくても出来ますよ、という意味で
２つ回答させていただきました。

この回答への補足

＞zeff様
ご回答ありがとうございます。

私の知識では全く何を言っているのかわからないのですが、他の方からすれば大変わかり易いご説明だと思います。

とりあえず私は「カーソルを合わせると文字が変わる方法」さえわかればいいのでまた何かの機会にこのご説明を読んで勉強したいと思います。

それと、私の補足で「this.innerHTMLを使うタイプ」と「change(this,***)のような関数を呼び出すタイプ」では何が違うのか聞きましたが、構造？的なことではなく「ブログが重たくなる」や見た目やSEO対策的なこと等を聞きたくて補足しました。
あらためて
＞●this.innerHTMLを使うタイプ
＞●change(this,***)のような関数を呼び出すタイプ
ではどのような違いがあるのでしょうか？

補足日時：2010/02/28 09:36

通報する

- 0
- 件

通報する

No.3

回答者： zeff#1
回答日時：2010/02/28 11:47

＞「ブログが重たくなる」や見た目や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 …

- 0
- 件

通報する

この回答へのお礼

＞zeff様
ご回答ありがとうございます。

とても参考になりました！

通報する

お礼日時：2010/03/01 07:56

No.1

回答者： zeff#1
回答日時：2010/02/26 12:11

簡単にinnerHTMLで良いのではないでしょうか。

if (navigator.userAgent.indexOf("Firefox") > -1) {

o.textContent = v;

}else{

o.innerText = v;

}

}

この部分はたぶん
FirefoxならtextContentを、
それ以外（たぶんInternetExplorer)なら
innerTextを使うという指定。
「たぶん」が多くてスミマセン。よく判らないので；

自分ならこうします。
<script type="text/javascript">

</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">

</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>

の場合となにが違うのでしょうか？
無知でもうしわけないですが、ご教授お願いします。