0

HTML ページに 4 つのリンクがあります。コードは次のとおりです。

<a class="lb" href="home.php"><img id="imgH" src="Bhome.png" onmouseover="onHover();"/></a>
<a class="lb" href="AboutUs.php"><img id ="imgA" src="Babout.png" onmouseover="onHover();" /></a>
<a class="lb" href="code.php"><img id ="imgC" src="Bcode.png" onmouseover="onHover();" /></a>
<a class="lb" href="login.php"><img id="imgL" src="Blogin.png" onmouseover="onHover();" /></a>

ホバーすると、対応する画像を別の画像に変更したいと思います。イメージタグごとに異なる関数を書きたくありません。Javascript 関数で、どの img タグが onHover 関数を呼び出したかを調べるにはどうすればよいですか?

4

6 に答える 6

2

要素を渡します:

..... onmouseover="onHover(this)";

そしてただする

function onHover(elem) {
    elem.src = 'someother_image.png';
}

または jQuery イベント ハンドラを使用します。

$('#imgH, #imgA, #imgC, #imgL').on('mouseover', function() {
    this.src = 'someother_image.png';
});
于 2013-09-28T17:57:54.153 に答える
1

すぐそこに停止します。

あなたは理想的とは言えない方法でこれを行っています。

  1. onmouseoverインライン属性は、イベントリスナーを追加するためのくだらない方法であるため（その重複をすべて見てください）
  2. あなたがそれをコーディングした方法は、実際にはわかりません（this各引数として追加しないとわかりません）
  3. これには JavaScript も必要ありません (ポインターが画像から離れたときに画像を元に戻したい場合)。

代わりに、aCSS (background-imageプロパティ) を使用して要素の背景に画像を使用するようにします。

次に、 を:hover変更するか、スプライト シートを使用して を変更するだけbackground-positionです。

次のようになります (id属性をa要素に移動します)...

a.lb {
    background-image: url(/images/menu.png);
}

#imgH {
    background-position: 0 0;
}

#imgH:hover {
    background-position: 0 -200px;
}
于 2013-09-28T17:58:22.180 に答える
1

インライン スクリプト呼び出しを削除して、これを使用することをお勧めします。

$('a.lb img').on('mouseover', function() {
    this.src = new_image_you _want; //this is the var with the image you want
});

ここでデモをコードして、ホバリングしている画像を取得します。

于 2013-09-28T18:10:24.137 に答える
0 
<a class="lb" href="home.php"><img id="imgH" src="Bhome.png" onmouseover="onHover(this.id);"/></a>

<a class="lb" href="AboutUs.php"><img id ="imgA" src="Babout.png" onmouseover="onHover(this.id);" /></a>

<a class="lb" href="code.php"><img id ="imgC" src="Bcode.png" onmouseover="onHover(this.id);" /></a>

<a class="lb" href="login.php"><img id="imgL" src="Blogin.png" onmouseover="onHover(this.id);" /></a>
于 2013-09-28T22:54:36.240 に答える