0

ユーザーがホバーしている画像に応じてテキストを変更したいと思います。正しい考えだと思ったのですが、コードが機能しません。

http://jsfiddle.net/6V2TL/

HTML

<p id="test">
some text 1
</p>
<div id="image1" onmouseover="change1()">
    <img src="http://www.helpinghomelesscats.com/images/cat1.jpg">
</div>
<div id="image2" onmouseover="change2()">
    <img src="http://cvcl.mit.edu/hybrid/cat2.jpg">
</div>

JS

function change1() {
     document.getElementById("test").innerHTML = "this is a cute cat";   
}
function change2() {
     document.getElementById("test").innerHTML = "this is a cuter cat";   
}    ​

ありがとう

4

4 に答える 4

3

あなたのコードは onLoad ハンドラ内にあり、ページから実行することはできません。左の最初のドロップダウンはこれを変更します。リストから「ラップなし (ヘッド)」を選択してください。

デモ: http://jsfiddle.net/SO_AMK/35s4C/

function change1() {
  document.getElementById("test").innerHTML = "this is a cute cat";
}

function change2() {
  document.getElementById("test").innerHTML = "this is an angry cat";
}
<p id="test">
  some text 1
</p>

<div id="image1" onmouseover="change1()">

  <img src="http://lorempixel.com/output/cats-q-c-640-480-1.jpg">

</div>

<div id="image2" onmouseover="change2()">
  <img src="http://lorempixel.com/output/cats-q-c-640-480-2.jpg">
</div>

于 2012-10-12T20:27:32.843 に答える
1

コンソールを見ると、カーソルを合わせたときに関数が見つからないというエラーがスローされることがわかります。

JFiddle はデフォルトで、ページが特別なハンドラーでロードされた後に Javascript ボックスにコードをロードします。コードをラップされていない形式に配置するように変更して、ボディがホバーしたときに関数が実際にグローバルに存在するようにします。アクセス: http://jsfiddle.net/6V2TL/3/

ツールバーの左側のオプションにあります。

于 2012-10-12T20:28:15.630 に答える
0

あなたのJavaScriptメソッドはonchange1、onchange2onmouseoverイベントで呼び出されていません。このリンクを試すことができます

http://jsfiddle.net/6V2TL/5/ .

于 2012-10-12T20:29:18.050 に答える
0

見た目の JSfiddle サイトに問題があります。js を HTML ウィンドウに移動したところ、機能しました。しかし、あなたのコードは機能します。

http://jsfiddle.net/6V2TL/9/

于 2012-10-12T20:36:29.357 に答える