懸停的動畫GIF（tumblr html）

Question

我已經嘗試了許多不同的代碼，但我似乎無法讓它們中的任何一個工作，或者我不確定在哪裏放置代碼。 （我通過tumblr主題通過html來做到這一點）

我想在懸停時動畫頭部gif。我有一個靜態gif http://i.imgur.com/K3sHfIF.gif &動畫一個http://i.imgur.com/fbiY7A0.gif。

有人請告訴我如何做到這一點，以適應tumblr。

Answer 1

您不能在懸停時動畫gif文件;或啓動懸停動畫等。

您可以在此處執行的操作是在主頁上添加圖像，並在存在懸停事件時更改該圖像。

這裏將是例如

<img src="/link_of/image.png" alt="photo" class="header" /> 

然後jQuery代碼將採取的行動，並處理鼠標懸停事件作爲

$('.header').hover(function() { 
    $(this).attr('src', '/link_of/animation.gif'); 
}); 

現在，當你將鼠標懸停在元素。它將獲得懸停事件時更改的源屬性。請記住始終在項目中包含jquery源文件。

Answer 2

嘗試製作一個div（與靜態gif裏面）你想要的圖像在網站上。然後，使用onmouseover調用將div的innerHTML設置爲動畫gif，並使用onblur調用將其設置回靜態。

HTML：

<div id="div_name" onmouseover="showAnimated();" onblur="showStatic();"> 
    <img src="source of static gif"> 
</div> 

的JavaScript：

function showAnimated(){ 
    document.getElementById('div_name').innerHTML = "<img src=\"source of animated gif\">"; 
} 
function showStatic(){ 
    document.getElementById('div_name').innerHTML = "<img src=\"source of static gif\">"; 
} 

希望幫助！