Retrouvez cet article dans : Linux Magazine HS 22

NIVEAU : AVANCE

Lorsqu'on souhaite rendre actif un lien composé d'une image de manière à ce que celle-ci change au passage de la souris, le reflexe est souvent d'utiliser JavaScript. Cependant, il existe une méthode permettant de se passer de ce langage en utilisant les standards supportés par tous les navigateurs.

Bien que la plupart des navigateurs permettent de comprendre JavaScript, il n'en reste pas moins qu'il s'agit là d'un langage de programmation. En cela, pour un simple changement d'image au passage du pointeur de la souris, c'est un peu comme utiliser une masse pour écraser un moustique.

Le langage de description HTML permet, comme chacun le sait, de composer des pages Web. Le concept de feuilles de style fut ajouter par le W3C (World Wide Web Consortium) dès 1996 sous la forme d'une recommandation concernant les CSS ou Cascading StyleSheets (feuilles de style en cascade). Le but le cette recommandation était de permettre clairement la séparation du contenu et de la forme. De plus l'utilisation des CSS permet de dépasser les limitation du langage HTML seul.

HTML permet d'utiliser un certain nombre de balises définissant la manière de formater le contenu d'une page Web. Le nombre de ces balises est limité. Avec l'utilisation des CSS il devient possible d'étendre les fonctionnalités de présentation de la page et de centraliser l'aspect des éléments HTML. Les CSS sont des styles tout comme vous pouvez en trouver dans des applications bureautiques de type OpenOffice.org ou MS/Office. Change un style revient à changer automatiquement la forme et l'aspect de tous les éléments HTML qui l'utilise.

La notion de Cascading est très importante dans les CSS. En effet, les styles définis par l'utilisateur peuvent être organisés hiérarchiquement. Un style peut ainsi hériter toutes les propriétés d'un autre style et ajouter ses propres options de présentation. Il devient donc possible d'organiser ses styles de manière optimale en évitant au maximum la redondance d'informations.

Mais revenons à nos moutons. Par l'intermédiaire des CSS, il est possible de spécifier différentes choses qu'il n'est pas possible de faire avec HTML seul. Parmi celles-ci nous avons l'équivalent du onmouseover JavaScript. Précisément ce qui nous intéresse dans le cadre de cet article.

En dehors de l'avantage consistant à se passer de JavaScript, l'utilisation des CSS permet d'utiliser une seule image pour tout nos éléments actifs. En effet, tout comme avec les jeux vidéo (un peu anciens), les graphismes peuvent être stockés sous la forme d'un seul et même fichier graphique. On choisira, lors de l'affichage la partie de l'image à utiliser. Ceci permet de ne faire transiter qu'un seul fichier lors de la connection au serveur. Avec une page utilisant Javascript de manière basique chaque image est chargée individuellement. Pire encore, le passage de la souris provoque le téléchargement de l'image de l'élément dans son état actif. Bien entendu, il existe des astuces permettant de «précharger» les images, mais cela ne fait que compliquer le code JavaScript si n'était déjà pas nécessaire pour peu que l'on fasse le choix des CSS.

Allons-y !

L'image de base est donc composée de tous les éléments graphiques. Pour notre exemple nous utiliserons une image de 1024 pixels de large sur 512 de haut. Il s'agit tout simplement de la concaténation de différentes versions d'un des bouton décrit dans le présent hors-série.

Chaque bouton occupe une zone carrée de 256 pixels de coté. Bien entendu, ceci est un peu grand pour une réelle utilisation dans une page Web mais parfaitement adapté pour une démonstration. L'image complète fait donc 4 boutons de large sur 2 de haut. La partie supérieure se compose de boutons dans leur état inactif. La partie inférieure contient respectivement la version active des boutons placés immédiatement au dessus.

Il existe plusieurs manières de procéder. L'une d'entre elle fait usage des balises div. Celle-ci permet de spécifier une division (également appelé passage) ou, autrement dit, un bloc ayant ses propriétés propres et permettant d'inclure toutes sortes de choses (images, textes, titres, listes, etc). Les divisions remplacent avantageusement les tableaux car elles sont bien plus souples d'utilisation. Nous n'entrerons pas ici dans le débat sur l'utilisatio judicieuse ou non des tables pour organiser une page.

Commençons par le début et proprement :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Essai</title>

Ceci fait nous pouvons passer à la définition des styles :

<style media="screen" type="text/css">

Nous n'allons pas utiliser de classes ici, ce n'est pas utile. En effet, chaque élément étant unique sur la page, nous pouvons lui associer un identifiant : un sélecteur ID. Un identifiant permet de définir, dans la CSS, les propriétés de présentation d'un seul et unique élément. Commençons par un premier bouton :

#bou1 a {
  position: absolute;
  width: 256px; height: 256px;
  display:block;
  background: transparent url(map.png)
    0 0 no-repeat;
}

La syntaxe des CSS est relativement simple. Les accolades permettent de spécifier le début et la fin de la définition d'un style. Pour savoir à quelle balise s'applique le style on débute la ligne par un sélecteur. Il peut d'agir d'un nom de balise, d'un identifiant ou, comme ici, des deux. Ce style s'applique à la balise a d'un élément identifié par bou1.

Le style lui-même est définit par des couples propriété/valeur. La fin des valeurs attribuées à une propriété est marquée par un point-virgule. Que définissons-nous à propos de cet élément ?

position: absolute;

Tout d'abord, nous souhaitons un placement en coordonnée absolue. Nous spécifirons l'emplacement exacte des divisions. Bien entendu, ceci est à adapter en fonction de la page HTML que vous souhaitez construire.

width: 256px; height: 256px;

Nous spécifions ensuite la taille. C'est ici capital puisque notre image fait en réalité 1024 par 512 mais que chaque bouton présent dans le fichier fait 256 pixels de côté. Notre division doit donc faire cette taille. Nous pouvons, à loisirs spécifier par la suite la zone de l'image qui doit apparaître dans cette division carrée.

display: block;

Nous demandons un affichage en bloque de l'identifiant, même si celui-ci est composé de plusieurs éléments. Ceci est particulièrement intéressant avec des images ou des divisions incluant un grand nombre de choses.

background: transparent url(map.png)
  0 0 no-repeat;

Voilà l'élément clef. Plutôt que d'afficher l'image directement, nous préférons l'utiliser comme fond pour la division. Pour ce faire, nous utilisons la propriété background en spécifiant transparent pour ne pas voir de couleur de fond, url pour spécifier l'image, 0 0 comme position de départ et enfin no-repeat pour ne pas avoir d'effet de remplissage.

Le point intéressant est bien sûr, la position de départ. C'est très exactement là ce qui nous permet d'utiliser une seule image pour tous nos boutons. Mais voyons cela de suite en ajoutant un style :

#bou1 a:hover {
  background: transparent url(map.png)
    -512px -256px no-repeat;
}

Ceci concerne toujours le même identifiant mais le sélecteur est ici a:hover. :hover est une pseudo-classe permettant de définit l'aspect d'un élément lorsque le curseurs de la souris passe dessus. Cet aspect disparaît lorsque le curseur sort de la zone concernée. Remarquez que nous utilisons la même image mais avec une position différente en X et en Y.

Les positions sont données de manière négatives et pour cause. Imaginez le carré comme étant fixé dans l'espace mais l'image placée en dessous comme mobile. Pour arriver à obtenir une image de bouton actif violet dans le carré, nous devons déplacer l'image vers la gauche de 512 pixels et vers le haut de 256 pixels. Comme les positions positives désignent des points vers la droite et vers le bas, nous fournissons des positions négatives.

Ce nouveau style hérite naturellement du précédent les caractéristiques qui ne sont pas précisées ou écrasées. Nous pouvons maintenant finir notre page HTML :

</style>
</head>
<body>

<div id="bou1"><a href="#1"></a></div>

</body>
</html>

Il ne nous reste plus qu'à ouvrir le fichier dans un navigateur comme Firefox, par exemple. Le bouton s'affiche et le passage de la souris, comme prévus, change l'image dans le div.

Pour changer l'aspect du bouton actif, il nous suffit, dans la CSS, de spécifier une autre position. Il en va de même avec la version inactive si nous l'avions déclinée en plusieurs versions.

Plusieurs éléments

Un menu ne se composant généralement pas d'une seule entrée nous allons démultiplier les styles. Avec les CSS, il faut penser à l'héritage et à la simplification. Inutile donc de copier/coller le style de la division pour la division inactive. Il nous suffit d'ajouter un nouvel identifiant et le sélecteur adéquate en conservant tout le reste :

#bou1 a, #bou2 a {
  position: absolute;
  width: 256px; height: 256px;
  display:block;
  background: transparent url(map.png)
    0 0 no-repeat;
}

Nous n'avons plus, ensuite, qu'à préciser l'emplacement de #bou2 et les propriétés de la version active :

#bou2 a {
  left: 256px;
}

#bou2 a:hover {
  background: transparent url(map.png)
    -768px -256px no-repeat;
}

Et voilà, le tour est jouer. Nous pouvons ajouter une division identifiée par bou2 :

<div id="bou2"><a href="#1"></a></div>

Et voici le résultat :

Un peu de texte

Les divisions sont des blocs permettant de stocker des éléments. Pour l'heure nos divisions ne contienne strictement rien, nous ne faisons qu'afficher une image en fond de division. si nous ajoutions un lien avec du texte, celui-ci se placerait en début de division, c'est à dire en haut à gauche. Ce n'est pas exactement ce que nous voulons. L'intérêt de la manipulation est de pouvoir placer un texte dans le centre du bouton de manière à donner un sens aux entrées du menu.

Encore une fois, les CSS viennent à notre secours. Il suffit de donner des valeurs à certaines propriétés. Voici ce que nous ajoutons dans le style définissant les divisions inactives :

  text-align: center;
  line-height: 256px;
  font-size: x-large;
  font-style: bold;
  text-decoration: none;
  color: white;
  font-family: Cooper, Verdana, Arial, Helvetica;

Les deux premières propriétés permettent de centrer le texte dans la division. La première précise l'alignement horizontal et la seconde précise qu'une ligne occupe la totalité de la division verticalement. De ce fait le texte sera centré en hauteur. Attention cependant, ceci ne fonctionne que pour une seule ligne de texte mais ce n'est habituellement pas un problème pour de simples entrées comme celles-ci.

font-size et font-style précisent respectivement la taille de du texte et le style gras. text-decoration s'avère ici nécessaire afin que le lien ne soit pas souligné comme c'est le cas par défaut. Nous précisons également la couleur du texte avec color: white.

Enfin, nous spécifions la police de caractères. Nous pouvons en spécifier plusieurs car tous les systèmes ne disposent pas des même polices. C'est le cas de Cooper par exemple, généralement présente sur les systèmes GNU/Linux ayant les FreeFonts installées. Les polices listées pour la propriété font-family sont testées dans leur ordre d'apparition. Ici, si Cooper n'est pas présente, Verdana sera essayée, puis Arial, etc...

Il ne nous reste plus qu'à utiliser un texte pour les liens :

<div id="bou1"><a href="#1">RETOUR</a></div>
<div id="bou2"><a href="#1">ENCORE</a></div>

Le résultat est assez sympathique :

Utilisez des listes

L'utilisation des CSS n'est pas limitée aux divisions. Nous pouvons arriver au même résultat en utilisant des listes non numérotées. L'organisation est sensiblement différente puisque nous avons la liste elle-même (balise ul) et les éléments de la liste (balise li). Nous pouvons mettre à profit cette spécificité. Commençons par définir un identifiant pour la liste elle même :

#bouton {
  width: 1024px;
  height: 256px;
  background: url(map.png);
  margin: 10px auto; padding: 0;
  position: relative;
}

Cette fois la taille de l'image concerne la largeur complète, c'est à dire tous les boutons inatifs. Ajoutons des préférences concernant le sélecteur li :

#bouton li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

Nous souhaitons ici ne rien laisser paraître concernant la présence d'une liste et que les images soient parfaitement ajustées. Enfin, nous apportons les dernières spécifications concernant l'aspect d'une entrée de la liste et ce, avec le sélecteur a :

#bouton li, #bouton a {
  height: 256px;
  display: block;

  text-align: center;
  line-height: 256px;
  font-size: x-large;
  font-style: bold;
  text-decoration: none;
  color: white;
  font-family: Cooper, Verdana, Arial, Helvetica;
}

Voici pour ce qui concerne toutes les balises li quelles qu'elles soient. Nous pouvons maintenant nous pencher individuellement sur chaque entrée :

#bou1 {left: 0; width: 256px;}
#bou1 a:hover {
  background: transparent url(map.png)
    0 -256px no-repeat;
}

#bou2 {left: 256px; width: 256px;}
#bou2 a:hover {
  background: transparent url(map.png)
    -256px -256px no-repeat;
}

#bou3 {left: 512px; width: 256px;}
#bou3 a:hover {
background: transparent url(map.png)
  -512px -256px no-repeat;
}

#bou4 {left: 768px; width: 256px;}
#bou4 a:hover {
  background: transparent url(map.png)
    -768px -256px no-repeat;
}

Nous utilisons, bien entendu, des identifiants différents pour chaque entrée de liste en spécifiant tout d'abord la taille et l'emplacement puis pour le sélecteur a:hover l'image à utiliser. Notez que contrairement aux divisions nous avons spécifié un fond global pour la liste et un fond différent pour chaque entrée de cette dernière.

Utiliser ces styles est très simple :

<ul id="bouton">
  <li id="bou1"><a href="#1">UN</a></li>
  <li id="bou2"><a href="#2">DEUX</a></li>
  <li id="bou3"><a href="#3">TROIS</a></li>
  <li id="bou4"><a href="#4">QUATRE</a></li>
</ul>

Et le résultat à la hauteur :

Conclusion

Comme vous avez pu le voir, l'utilisation des CSS permet avantagement de remplacer d'anciennes techniques plus lourdes pourtant encore d'usage. Nous n'avons vu ici qu'une toute petite partie de ce qu'il est possible de faire avec des CSS. Menus flottants, boîte de dialogue et menus hiérarchisés sont autant de choses que vosu pourrez réaliser en les maîtrisant.