Старт / Стоп на анимиран гиф
Метода които ще ви покажа е много елементарен
имаме две картинки гиф едната е анимирана другата Не е и с помоща на цсс ще направим така че при ховер или при клик на картинката изображението да се движи ето ДЕМО

ето и кода
CSS:

<style type="text/css">
a.click {display:block; width:240px; height:180px; background:#fff url(eclipse_start.gif) no-repeat; overflow:hidden; cursor:default;}
a.click img {visibility:hidden;}
a.click:active {background:#000;}
a.click:active img, a.click:focus img {visibility:visible; border:0;}

a.hver {display:block; width:240px; height:180px; background:#fff url(eclipse_start.gif) no-repeat; overflow:hidden; cursor:default;}
a.hver img {visibility:hidden;}
a.hver:hover {background:0;}
a.hver:hover img {visibility:visible; border:0;}
</style>


HTML:

<a class="click" href="#" ><img src="eclipse.gif" /></a>
<h2>вариант 1<br />Кликнете върху картинката и тя ще се стартира<br />когато кликнете отното тя спира</h2>

<a class="hver" href="#" ><img src="eclipse.gif" /></a>
<h2>вариант 2<br />Посочете картинката и тя ще се стартира</h2>


и сега как работи :) ако имате малки познания по цсс сигорно вече сте разбрали как става.
вариант 1
Имаме линк с картинка т.е. картинката която се движи, но тя е скрита с a.click img {visibility:hidden;}
и с a.click {display:block; width:240px; height:180px; background:#fff url(eclipse_start.gif) no-repeat;
е сложена картинка която се явява бекграунд, при клик, бекграунда ичезва а движештата картинка се появява
обитах се да обясня дано стеме разбрали

ДЕМО



/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:25 22-07-2011
Полезен урок.
1