Images réactives et menus graphiques
CHAPITRE 13
183
Application à un menu graphique
Ces idées fondamentales désormais maîtrisées, passons à la vitesse supérieure :
l’application de cette méthode à la conception d’un menu complet, comprenant six
boutons indépendants. Même si ces boutons diffèrent les uns des autres, tant au
repos que sous le pointeur de la souris, une seule image suffira à l’ensemble du menu
et à tous ses comportements. Reprenons la même procédure dans le but d’obtenir le
comportement présenté figure 13-5.
CULTURE Les formats d’image
On trouve sur le Web trois formats d’image courants : GIF, JPEG, et PNG.
GIF (Graphics Interchange Format), format de compression sans pertes limité à 256
couleurs, ne convient pas pour des photographies ou illustrations contenant beaucoup de teintes ou des dégradés, mais c’est le format le plus adapté aux logos et images simples. Il propose également la transparence (version 89a) et les animations (un
GIF animé empilant simplement plusieurs images).
JPEG (Joint Photographic Experts Group), format de compression non conservative
(c’est-à-dire détruisant certaines informations contenues dans l’image), accepte plusieurs milliers de couleurs (en 24 ou 32 bits). Il est donc idéal pour les photographies.
PNG (Portable Network Graphics) est un format de compression sans pertes, libre et
recommandé par le W3C. Il cumule les avantages de GIF (qualité, transparence) et de
JPEG (compression, nombre de couleurs). Toutefois, il produit parfois une image un
peu plus lourde que ces derniers, surtout lorsque le format (PNG8, PNG24, PNG32)
n’est pas adapté au nombre réel de couleurs de l’image.
Figure 13–5
Un menu graphique
en CSS
CHAPITRE 13
183
Application à un menu graphique
Ces idées fondamentales désormais maîtrisées, passons à la vitesse supérieure :
l’application de cette méthode à la conception d’un menu complet, comprenant six
boutons indépendants. Même si ces boutons diffèrent les uns des autres, tant au
repos que sous le pointeur de la souris, une seule image suffira à l’ensemble du menu
et à tous ses comportements. Reprenons la même procédure dans le but d’obtenir le
comportement présenté figure 13-5.
CULTURE Les formats d’image
On trouve sur le Web trois formats d’image courants : GIF, JPEG, et PNG.
GIF (Graphics Interchange Format), format de compression sans pertes limité à 256
couleurs, ne convient pas pour des photographies ou illustrations contenant beaucoup de teintes ou des dégradés, mais c’est le format le plus adapté aux logos et images simples. Il propose également la transparence (version 89a) et les animations (un
GIF animé empilant simplement plusieurs images).
JPEG (Joint Photographic Experts Group), format de compression non conservative
(c’est-à-dire détruisant certaines informations contenues dans l’image), accepte plusieurs milliers de couleurs (en 24 ou 32 bits). Il est donc idéal pour les photographies.
PNG (Portable Network Graphics) est un format de compression sans pertes, libre et
recommandé par le W3C. Il cumule les avantages de GIF (qualité, transparence) et de
JPEG (compression, nombre de couleurs). Toutefois, il produit parfois une image un
peu plus lourde que ces derniers, surtout lorsque le format (PNG8, PNG24, PNG32)
n’est pas adapté au nombre réel de couleurs de l’image.
Figure 13–5
Un menu graphique
en CSS