Boutons
ACCUEIL GIFOMANIA


Le bouton avec le lien
Le bouton animé sans lien
Tous les boutons sont de format " gif "
EXPLICATION pour créer des boutons animés avec une feuille de style (CSS)

Le but : le bouton s'anime quand le curseur passe dessus.

Les étapes...
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 >
    Vous pouvez rapidement créer un menu
    et même changer tout aussi rapidement son look en changeant les boutons.

    2 eme Solution : le Javascript

    On peut réaliser ces boutons animés "rollover"(une image pour une autre) en javascript. Pour un bouton , code à mettre entre les balises <head> et </head>:
    Ce code précharge l'image dans le cache du navigateur
    il est à noter que ce code peut servir également pour les feuilles de style.
    Vous devez inscrire le code javascript AVANT le code style.
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    image1 = new Image();
    image1.src = "anime1.gif";
    -->
    </script>

    Le lien correspondant sera placé après la balise <body>
    <a href="page1.htm" onmouseover="image1.src='anime1.gif';" onmouseout="image1.src='fond1.gif';"> <img name="image1" src="fond1.gif" border=0></a>

    Le bouton avec le lien
    Le bouton animé sans lien
    Le résultat est identique à la première solution .

    Pages 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15