僅更改圖片onmouseover只有一次

Question

我需要將鼠標上的圖片僅更改一次。所以當鼠標懸停時 - 改變圖片和停止，不要回到默認圖片，保持新的。我需要這個，因爲默認圖像是GIF動畫和鼠標懸停是靜態PNG pictire和人們拿着鼠標的第二個動畫圖片回來。至少延遲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();" /> 

Answer 1

是的，你可以使用one()處理程序啓動它只有一次。

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

下面是一個非常基本的jsFiddle示例，顯示它與警報一起使用。

Answer 2

對於jQuery，您可以使用.one()函數僅觸發一次該事件。

jsFiddle

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

作爲純JS溶液，通過分配null到它分離事件處理程序。

jsFiddle

var img = document.getElementById('menuImg'); 
img.onmouseover = function() { 
    this.setAttribute('src', 'https://www.google.com.au/images/srpr/logo4w.png'); 
    img.onmouseover = null; 
};