2

マウスオーバーで画像を一度だけ変更する必要があります。そのため、マウス オーバー - 画像を変更して停止すると、デフォルトの画像に戻らず、新しい画像を保持します。デフォルトの画像はgifアニメーションで、マウスオーバーは静的なpng画像であり、人々が2番目のアニメーション画像のためにマウスを保持すると戻ってくるため、これが必要です。onmouseout アクションで少なくとも 5 秒間遅延します。

現在、私はこのjavascriptを使用しています。

function onHover()
{
$("#menuImg").attr('src', 'images/mouseover_picture.png');
}

function offHover()
{
$("#menuImg").attr('src', 'images/default_picture.png');
}

html :

<img src="map.gif" id="menuImg" alt="info" width="415" height="380" usemap="#Europe" border="0" onmouseover="onHover();" onmouseout="offHover();" />
4

2 に答える 2

4

はい、one()ハンドラーを使用して一度だけ起動できます。

$('#menuImg').one('mouseenter', function() {   
  $(this).attr('src', 'images/mouseover_picture.png');   
});

これは、アラートで使用される非常に基本的なjsFiddleの例です。

于 2013-03-29T16:13:12.373 に答える
3

jQuery の場合、.one()関数を使用してイベントを 1 回だけトリガーできます。

jsフィドル

$('#menuImg').one('mouseover', function () {
    $(this).attr('src', 'https://www.google.com.au/images/srpr/logo4w.png');
});

純粋な JS ソリューションとして、割り当てnullてイベント ハンドラーを切り離します。

jsフィドル

var img = document.getElementById('menuImg');
img.onmouseover = function () {
    this.setAttribute('src', 'https://www.google.com.au/images/srpr/logo4w.png');
    img.onmouseover = null;
};
于 2013-03-29T16:17:37.417 に答える