テキストリンクにマウスをロールオーバーさせた時、表示させるテキスト(HTML)を変更することはできますか?


できるようなら、具体的なやり方を教えて下さると助かります。

回答の条件
  • URL必須
  • 1人10回まで
  • 登録:2006/09/01 18:09:48
  • 終了:2006/09/01 18:44:23

回答(2件)

id:talepanda No.1

talepanda回答回数57ベストアンサー獲得回数122006/09/01 18:16:07

ポイント30pt

http://www.google.com/

<a href="#" onmouseover="this.innerText='hoge'" onmouseout="this.innerText='boke'">boke</a>
id:notjust

ありがとうございます。簡単なんですね。

解説が欲しいのでもうちょっと開けておきます。

2006/09/01 18:29:12
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612006/09/01 18:36:32

ポイント40pt

こちらでいかがでしょうか?


※IE6とFireFox1.5 で動作確認済み

※this というのは、自身の要素を示します。

※FireFox かどうかを判断して、innerText または、textContent でセットします。



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

id:notjust

Safari使っているのですが、大丈夫でした。わざわざありがとうございます。

2006/09/01 18:43:15
  • id:Bill
    カーソルが乗っかっている時のアンカーテキストの幅が、元のアンカーテキストの幅より短い場合に、時々アンカーテキストが痙攣を起こすようなことになりますね。

    1. アンカーの右側の方から触れる。(テキストの方向がltrの場合)
    2. onmouseoverのイベント発動。
    3. アンカーの長さが短くなる。
    4. onmouseoutのイベント発動。
    5. アンカーの長さが長くなる。
    6. 2に戻って繰り返す。

    title属性を使う方法で実現するものを書いていて、動作確認中に気がつきました。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="ja">
    <script type="text/javascript">
    window.onload = function() {
     var anchors = document.getElementsByTagName('A');
     for(var i = 0, len = anchors.length, tmp; i < len; i++) {
      tmp = anchors[i];
      if(tmp.className == 'changeable') {
       tmp.onmouseover = changeAnchor;
       tmp.onmouseout = changeAnchor;
      }
     }
    }

    function changeAnchor() {
     var tmp = this.innerHTML;
     this.innerHTML = this.title;
     this.title = tmp;
    }
    </script>
    <title>This is a sample</title>
    <ul>
    <li><a href="http://example.com/changeable1" class="changeable" title="title属性の中身(ノーマル)">変わるアンカー、ノーマルなやつ</a></li>
    <li><a href="http://example.com/changeable2" class="changeable" title="title属性の中身(アブノーマル)">変わるアンカー、<em>子供要素あり</em></a></li>
    <li><a href="http://example.com/unchangeable">変わらないアンカー</a></li>
    </ul>
    </html>
  • id:Bill
    あと、Windows版のOpera 9.01で確認してみましたが、お二方のコードでは、一度カーソルを乗せた時にアンカーテキストが変化するだけで、その後は変化しませんでした。コードを見る限りでは問題なく動きそうな感じがあり、もしかしたら私の環境がおかしいのかもしれません。

    私のコードでは何故かそうではありませんでしたが、先のコメント(#c63747) の4.が発生しなかったりするので、カーソルを離した状態のアンカーテキストと、カーソルを乗せた状態のアンカーテキストが入れ替わったりします。これは、元のアンカーテキストをどこかに保持してそれを利用することで回避できそうですが……。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません