Dans un précédent article, nous avons vu comment agrémenter un formulaire d'envoi d'e-mail avec CSS. Il est possible d'aller encore plus loin pour rendre ses formulaires aussi conviviaux que possibles, et notamment lors de l'envoi, non plus d'un e-mail, mais d'un texte à l'aide d'un champ multiligne. Nous avons choisi ici de permettre très facilement de formater le texte saisi afin de préciser que certaines parties doivent être en gras, en italique, ou représentent un lien hypertexte. Ceci est utile notamment lors de l'envoi d'un message dans un forum. Ces trois fonctionnalités seront réalisées en Javascript, mais nous allons tout d'abord nous intéresser à leur réalisation graphique, qui devra émuler le style des barres d'outils classiques de nos systèmes d'exploitation. L'exploitation des boutons fera l'objet du deuxième volet de ce tutoriel.

Avant d'aller plus loin, voici d'emblée le résultat global:

Nous avons défini trois boutons, l'un pour formater le texte en gras "bold", l'autre pour formater le texte en italique, le troisième pour insérer un lien. Il suffit de sélectionner une partie du texte contenu dans le champ multiligne, et d'appuyer sur l'un des boutons, pour obtenir l'effet désiré.

Examinons d'abord le volet CSS, qui permet de régler l'apparence des boutons, selon que ceux-ci sont dans l'état "par défaut", dans l'état "survolé". Nous allons définir trois styles CSS, l'un correspondant au fond de la barre d'outils (style outils), les deux suivants aux deux états possibles (styles out et over, respectivement) de nos boutons (nous laissons de côté ici d'autres états comme "bouton pressé et souris non rélachée", par exemple).

Pour créer nos styles, nous allons utiliser trois couleurs prédéfinies, encapsulées dans les variables buttonface, buttonhighlight, et buttonshadow. La première correspond à la couleur (un gris) de fond de la barre d'outils d'une part, des boutons dans l'état "par défaut" d'autre part. Les deux suivantes correspondent aux couleurs des bords de boutons quand ceux-ci sont dans l'état "survolé": buttonhighlight est la couleur blanche, buttonshadow un gris plus foncé.

On écrira ainsi:

#outils {
               width: 262px;
               background: buttonface;
               border-top: 1px solid buttonhighlight;
               border-left: 1px solid buttonhighlight;
               border-bottom: 1px solid buttonshadow;
               border-right: 1px solid buttonshadow;
               margin: 0;
               text-align:right;
}

.out {
               background: buttonface;
               border: 1px solid buttonface;
               margin: 1;
}

.over {
               background: buttonface;
               border-top: 1px solid buttonhighlight;
               border-left: 1px solid buttonhighlight;
               border-bottom: 1px solid buttonshadow;
               border-right: 1px solid buttonshadow;
               margin: 1;
}

Le code en lui-même appelle peu de commentaires. "out" et "over" sont des classes (noter le point qui les précède), tandis que "outils" est un identificateur (voir pour plus d'informations). On a défini des marges quand celles-ci étaient nécessaires pour la présentation. La taille choisie pour la largeur (du fond) de la barre d'outils est arbitraire (en fait adaptée à la largeur du champ texte, soit 30 caractères sous IE).
Il nous reste à gérer le "rollover" en Javascript, en utilisant les images suivantes:

      

et avec les évenements: onMouseOver et onMouseOut. On écrira donc, par exemple pour la première image (appelée bold.gif):

<div id="outils">
   <img class="out" src="bold.gif"
              width="16" align="middle" height="16"
              onMouseOver="this.className='over';"            
              onMouseOut="this.className='out';"
              onclick=";">
</div>
(on laisse volontairement vide pour l'instant le comportement associé à l'événement onClick)

qui se traduit à l'écran par

Il reste maintenant à créer des fonctions Javascript (des comportements) pour nos trois boutons, et à fournir le code précis pour l'intégration HTML de l'ensemble champ de formulaire + barre d'outils. Ce sera l'objet de la deuxième partie ce ce tutoriel.