0

ある部分を指摘して議論できるようになりたいというイメージがあります。部屋の写真を想像してみてください。ウィンドウをロールオーバーすると、写真の下にテキストが表示されます。

背景画像の上に配置される一連のロールオーバーを作成しました。それは正常に動作します。ロールオーバーは CSS 疑似要素 (.thisLink:hover) です。

    <div class="thisLink t1" onMouseOver="describe('a1');" onMouseOut="hideMe();"></div>

私がやりたいことは、1.ユーザーが画像をロールオーバーすると、2.テキストがdivの画像の下に表示されることです。

リンク内からテキストを渡すことができました: onMouseOver="describe('Here's something interested');" それをdivのinnerHTMLに書き込む関数に。しかし、説明が長くなる可能性があるため、変数を呼び出すことを考えていました:

    function describe(txt){
      var a1="aaa ... aaa";
      var a2="bbb ... bbb";

      document.getElementByID('describe').innerHTML=txt;

したがって、マウスオーバーコードは次のようになります

      <div class= ... onMouseOver="describe('a1');" ... >

これにより、パラメータ「a1」が送信され、変数 a1 が呼び出されます。T テキスト "aaa ... aaa" が div に書き込まれます。

そのような幸運はありません。必要なテキストを取得する代わりに、渡されたパラメーター「a1」または「a2」を取得しました。

次に、if/else 句に入れてみました。

      function describe(txt){
        if (txt=a1){
            document.getElementById('describe').innerHTML="really important stuff";
        } else { ... }


      }

残念ながら、それもうまくいきませんでした。ここで何が欠けていますか？

// 編集済み

4

1 に答える 1

0

なぜJavaScriptを使用してこれを達成したいのですか? これを使用する唯一の理由は、画像がホバーされているときに ajax 呼び出しを使用して div のコンテンツをロードする場合です。しかし、あなたのコードにはそのようなものは見当たらないので、シンプルにするために CSS を使用することをお勧めします。

HTML

<div id="hover">Test message</div>
<div id="image"><img src="http://farm3.static.flickr.com/2641/4163443812_df0b200930.jpg"/></div>

CSS:

#hover {
    display: none; }

#image:hover + #hover {
    display: block;
}

jsfiddle: http://jsfiddle.net/ZGCqk/

編集：

それでもJavaScriptを使用したい場合、関数を呼び出すときに送信するパラメーター（a1）が関数のパラメーター（txt）で定義されていないため、投稿されたコードは機能しません。私は JavaScript の専門家ではありませんが、次の範囲でさらに試してみてください。

function describe(v) {

    if (v == "imgA") {
        var newTEXT = "sometext1";
            var divIMG  = "div1"; // the div the content should be placed in
    } else if (v == "imgB") {
        var newTEXT = "sometext2";
            var divIMG  = "div2";
    }

document.getElementById(divIMG).innerHTML = newTEXT;
};

そしてあなたのHTMLで：

onMouseOver="describe('imgA')"  // or imgB etc.
于 2013-08-30T23:53:18.870 に答える