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