Préambule

• http://innovablog.com/design/design-css-rollover-css-image/
• Visitez www.developpez.com, une source intarissable d’infos et de supers conseils.
• http://plambert.developpez.com/css-debutant/?page=page_5
• http://cssglobe.developpez.com/tutoriels/css/bouton-redimensionnable/
• http://cssglobe.developpez.com/

Un exemple d'utilisation de ces boutons se trouve sur la page d'accueil du site http://www.montigny-le-tilleul.be

Une image unique nous permet de créer, grâce aux classes du code css, des boutons facile à implémenter dans l’éditeur de texte FCKeditor.

Ces boutons seront également facilement animés grâce au sélecteur css :hover.

Le fait de n’avoir qu’un seul fichier image et de travailler avec les css, permet une maintenance plus rapide en cas de changement de style du site.
 

Créer l’image

Pour notre exemple nous prenons ces deux petites images créées à l’aide du site  http://www.mycoolbutton.com/ , que nous collons ensemble à l’aide d'un éditeur d'image comme Gimp :

Le code css

div.mlt_bouton_sombre a {
    /* mise en forme du texte : centré, gras, blanc et non souligné */
    text-align: center ;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    /* l’image de font */
    background-image: url("monbouton"); /* ici l’adresse de votre bouton */
    background-repeat: no-repeat;
    background-position: 0px -0px; /* -0px = décalage */
    display: block; 
    padding-top: 10px; /* pour centrer le texte verticalement */
    /* dimentions du block ! au padding ! */
    width: 100px;
    height: 25px; /* + les 10px de padding = hauteur de l'image */
}

div.mlt_bouton_clair a {
    /* mise en forme du texte : centré, gras, blanc et non souligné */
    text-align: center ;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    /* l’image de font */
    background-image: url("monbouton"); /* ici l’adresse de votre bouton */
    background-repeat: no-repeat;
    background-position: 0px -35px; /* -35px = décalage */
    display: block; 
    padding-top: 10px; /* pour centrer le texte verticalement */
    /* dimentions du block ! au padding ! */
    width: 100px;
    height: 25px; /* + les 10px de padding = hauteur de l'image */
}

Quelques explications :

• Grâce aux propriétés width et height, on ne laisse apparaître de l’image qu’une partie de 35px sur 100px, le reste de l’image sera caché aux yeux de tous...

• le décalage de -0px ou -35px permet de faire apparaître dans la fenêtre la partie de l’image que l’on désire (foncée ou claire).

• Pour calculer la hauteur de l’image (height), il faut tenir compte du padding : pour une image de 35px, il faut compter une hauteur de 25px si on veut un padding de 10px. Ceci résulte du fait qu’en css, la taille d’un élément se calcule comme ceci : élément = height (ou width, c’est selon) + margin + border + padding.

• Pour du texte un peu plus long (sur deux lignes), on peut prévoir un style supplémentaire (p. e. : div.mlt_bouton_sombre_long a ...) où le padding-top serait de 2px... Attention de bien modifier aussi la propriété height en fonction de votre padding.

Ajouter l’animation

div.mlt_bouton_clair a:hover {
    font-style: italic;
    background-position: 0px -0px;
}

div.mlt_bouton_sombre a:hover {
    font-style: italic;
    background-position: 0px -35px;
}

On remarquera que j’ai juste interverti les valeurs de décalage...

L’intégration à FCKeditor

Il ne nous reste plus qu’à intégrer nos nouveaux styles à FCKeditor...
Tout se paramètre dans Configuration du site --> Configuration des produits d'extension --> Configuration de FCKeditor.

Voici le code à coller à la suite de celui déjà existant sous la rubrique : Styles personnalisés.

<Style name="bouton clair" element="div">
    <Attribute name="class" value="mlt_bouton_clair" />
</Style>

<Style name="bouton sombre" element="div">
    <Attribute name="class" value="mlt_bouton_sombre" />
</Style>

L’utilisation

Dans FCK, tapez votre texte, assignez-lui un lien et appliquez-lui le style choisi.

Bon travail à tous