aujourd'hui je vais vous présenté comment crée des gif sur vos boutons.Les étapes...
*Mettre votre texte sur le bouton animé
*Sélectionnez une image qui va servir pour le bouton non animé (repos)
*Les boutons vont être affichés comme un fond , il faut donc *réserver la place du bouton avec une image de même taille *transparente.
*Mettre vos boutons dans un tableau afin qu'ils soient alignés correctement
-Voici le code de style pour un lien (1 bouton)
< style >
< !--
.lien1 {
background: url(fond1.gif);}
.lien1:hover {
background: url(anime1.gif);}
< /style >
Ce code se place entre les balises < head > et < /head >
Explication de ce code :
.lien1 crée une "class" qui sera attribuée à un lien (1 bouton)
background: url(fond1.gif);} affiche en fond l'image "fond1.gif"
.lien1:hover crée une "class" attribuée à un lien
QUAND LE CURSEUR PASSE SUR LE LIEN
background: url(anime1.gif);} affiche l'image "anime1.gif" quand le curseur est sur le lien
Pour le bouton ci-dessus le lien est :
< a href="votre lien ici" class="lien1" >
< IMG SRC="bl.gif" WIDTH=120 HEIGHT=30 border=0 >< /a >
On retrouve l'attribut "class" avec son nom dans le lien ainsi que l'image "bl.gif" , l'image transparente.
Chaque bouton étant différent , il aura un nom de class différent :
lien1 , lien2 , lien3 , etc....
Notez que vous pouvez mettre n'importe quel nom pour l'attribut "class".
Le code de style sera à répéter autant de fois que de liens (boutons).
ET POUR ENFONCER LE CLOU DES EXPLICATIONS...
voici le code à mettre entre les balises < head > et < /head > pour 2 boutons.
< style >
< !--
.lien1 {
background: url(fond1.gif);}
.lien1:hover {
background: url(anime1.gif);}
.lien2 {
background: url(fond2.gif);}
.lien2:hover {
background: url(anime2.gif);}
< /style >
source : decomania
amusé vous à faire vos image sur vos boutons :bye:
