ホバー上の画像を変更するタイマーを追加

Question

これは私のコードとjsfiddleです。効果は素晴らしいですが、唯一のことはタイマーを追加する方法がわかりません。

など。誰かが画像の上を移動すると、画像を即座に変更しません。変更する前にカーソルを10秒間保持する必要があります。

HTML

<a href="https://www.google.com/"><img src="chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png" onmouseover="this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-images-content.png'" onmouseout="this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png'" /></a> 

Answer 1

これはJavaScriptでtimeoutを設定することによって達成することができます。

ます。また、IDが含まれており、それがこのする必要がありますので、あなたのHTMLのインラインクリックイベントを削除する必要が

var timer; 

document.getElementById('img-hover').addEventListener('mouseover', function() { 
    clearTimeout(timer); 
    var elem = this; 
    timer = setTimeout(function() { 
     elem.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-images-content.png'; 
    }, 1000); 
}); 

document.getElementById('img-hover').addEventListener('mouseout', function() { 
    clearTimeout(timer); 
    var elem = this; 
    timer = setTimeout(function() { 
     elem.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png'; 
    }, 1000); 
}); 

：JSFiddleで、私がやったことを

<a href="https://www.google.com/"><img id="img-hover" src="chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png"/></a> 

JSFiddle

注意実際に見ることができるように画像を変更する必要があります:)

Answer 2

あなたはあなたのものにthis.srcが動作しなくなる場合が

onmouseover="window.setTimeout(function(){ document.getElementById('image1').src='http://www.w3schools.com/css/img_fjords.jpg' 
},1000);" 

注を行うためにJavaScriptからのsetTimeout（）関数を使用することができます。

https://jsfiddle.net/BoyWithSilverWings/dgvtvvj0/3/

Answer 3

setTimeout

<a href="https://www.google.com/"> 
    <img src="chromeextension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png" onmouseover="setTimeout(function() { this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-images-content.png'}, 10000)" onmouseout="this.src='chrome-extension://cipmepknanmbbaneimacddfemfbfgpgo/images/content/providers/google-translate-content.png'" /> 
</a>