호버상의 애니메이션 gif (tumblr html)

나는 많은 다른 코드를 시도했지만 그 중 어떤 것도 작동하지 않는 것으로 보이거나 코드를 어디에 둘 것인지 확실하지 않습니다. (나는 tumblr 테마에 html로 이것을하고있다)호버상의 애니메이션 gif (tumblr html)

나는 공중제비에 머리말 gif를 살리려고 노력하고있다. 정적 gif가 http://i.imgur.com/K3sHfIF.gif &이고 애니메이션이 http://i.imgur.com/fbiY7A0.gif입니다.

누가 tumblr에 맞게이 작업을 수행해 주시겠습니까?

출처

2014-04-25 Josh

호버에서 gif 파일을 애니메이션으로 만들 수 없습니다. 또는 호버 애니메이션 등을 시작하십시오.

여기에서 수행 할 수있는 작업은 메인 페이지에 이미지를 추가하고 호버 이벤트가있을 때이를 변경하는 것입니다. 당신이 요소 위에 마우스를 올려거야 이제 때 여기

그런 다음 jQuery 코드는

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

으로 마우스를 가져가 이벤트를 조치를 취할하고 처리 할 것 예를

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

될 것이다. hover 이벤트가 발생하면 소스 속성이 변경됩니다. 프로젝트에 항상 jquery 소스 파일을 포함시키는 것을 잊지 마십시오.

출처

2014-04-25 19:24:37

이미지를 사이트에두고 싶은 곳에 div (정적 gif가 포함 된)를 만들어보세요. 그런 다음 onmouseover 호출을 사용하여 div의 innerHTML을 애니메이션 gif로 설정하고 onblur 호출을 정적 호출로 다시 설정합니다.

HTML :

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

자바 스크립트 : 도움이

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\">"; 
}

희망!

출처

2014-04-25 19:24:57 KiaShakiba

호버상의 애니메이션 gif (tumblr html)

답변

관련 문제