CoupdePouce

Animer une image

gifs

( 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.

Par Jacky, Jeudi 15 Novembre 2007 à 04:01 GMT+2 dans Astuces CSS (article, RSS)

Vos commentaires

1 Le Samedi 17 Novembre 2007 à 20:59 GMT+2, par MCM

On peut faire de belles choses avec la feuille CSS!!

2 Le Dimanche 18 Novembre 2007 à 08:03 GMT+2, par Jacky

Tout à fait Marie-Christine, il y a ce site en anglais où tu peux voir des tas d'exemples.

www.cssplay.co.uk/menu/

3 Le Lundi 19 Novembre 2007 à 16:21 GMT+2, par MCM

Malheureusement une autre de mes lacunes c'est l'anglais, d'autres personnes pourront profiter de ce lien.
Bises!!

4 Le Mardi 20 Novembre 2007 à 07:29 GMT+2, par Jacky

Pour ça il n'y a pas de soucis, si tu travail avec Firefox, il y a la barre d'outil "Fox Lingo", très utile pour pouvoir traduire une page. addons.mozilla.org/fr/fir...

5 Le Mercredi 21 Novembre 2007 à 21:09 GMT+2, par MCM

Merci pour tous ces conseils Jacky!!

6 Le Vendredi 20 Juin 2008 à 10:36 GMT+2, par Jee'S'Bee

Bonjour,
Je souhaiterai moi aussi faire des images animées pour mon site... mais j'ai aps de recette
J'aimerai aussi mettre des morceau que j'ai composer... c'est à dire de la musique enregistrer sur mon pc.
Mais je pense que le site de skyrock n'est pas le bon.

7 Le Mercredi 23 Juillet 2008 à 07:50 GMT+2, par Jacky

Bonjour Jee,

que ce soit sur Skyrock, Skyblog ou autre, il n'y a pas de problème pour mettre de la musique.
Sur Mabulle, on doit attendre la prochaine version.

Autres publications sur le sujet

Aucune référence pour le moment.

Vous pouvez faire référence à votre publication en utilisant ce rétrolien

Commenter cet article

*


Pour être sûr... combien font 2 + 6 ? *

Se souvenir de moi


Les champs marqués d'un * sont obligatoires
Votre commentaire sera affiché en texte brut à l'exception des liens