CoupdePouce

( Cliquez sur l'image pour l'animer )

 

Comme vous le savez, un gif animé reste toujours en mouvement. Cette astuce, va vous permettre d'un simple clic de l'arrêter et de le mettre en marche à votre guise avec juste un peu de css.

Pour réaliser cette astuce, rien de plus simple; il suffit de prendre un gif animé et avec Photofiltre ou autre, l'ouvrir (Fichier >Importation > Gif animé) et prendre la première image en l'enrengistrant non pas en JPG mais en GIF.

Enregistrez les 2 images (gif animé et gif simple) dans la Mediathèque, puis rendez-vous dans la feuille de style.

a.click {display:block; width:370px; height:286px; background:#5B54D2 url(image simple) no-repeat; outline-color:#5B54D2; outline-style:solid; outline-width:2px; } a.click img {visibility:hidden;} a.click:active {background:transparent;} a.click:active img, a.click:focus img{ visibility:visible; border:0; }

Ensuite dans votre article:

<div id="animation"><a href="#nogo" class="click">
<img src="image animée" border="0" alt="gifs" />
</a></div>

Dans la feuille de style, modifiez les dimensions par celles de votre image.

Voilà! Vous pouvez maintenant faire démarrer et arrêter un gif animé sans utiliser du javascript.