Création d'images interactives en HTML et SVG

La conception d'interfaces web implique plusieurs étapes, dont le découpage graphique et la production de pages web interactives. Par défaut, les dimensions d'une carte graphique sont souvent définies par une balise DIV. L'interactivité, comme l'effet de survol, est généralement gérée par des styles CSS qui dictent le comportement des différents tracés (path) d'une carte SVG au passage de la souris. La première ligne de ce code contient la balise <a href>, qui encadre le chemin (path) pour le considérer comme un lien hypertexte standard. Ensuite, la deuxième ligne contient le PATH lui-même, responsable du dessin de chaque région de la carte. En SVG, pour dessiner une forme libre, un chemin commence toujours par M (Moveto) et se termine par Z (closepath).

Schéma montrant les étapes de découpage graphique d'une image pour le web

Les étapes du découpage graphique

Les étapes préliminaires à la production d'une page web incluent la création d'une maquette graphique qui représente la future page. Cette maquette peut être réalisée avec un logiciel professionnel ou directement dans un éditeur de texte. La découpe de l'interface commence généralement par le fond de page. Après enregistrement dans un dossier d'images, ces éléments seront insérés directement dans la page HTML. Chaque élément graphique suit ce même procédé. L'objectif principal est de découper l'interface graphique afin de minimiser le poids total de la page web. Il est donc conseillé de privilégier la découpe en éléments répétitifs et d'utiliser le code HTML et CSS pour assurer la continuité visuelle.

Gestion des interactions et des cartes SVG

Un défi courant concerne la gestion des effets visuels, comme rendre une carte plus claire lorsque la souris survole l'ensemble de celle-ci, tout en conservant cet effet lorsque le curseur passe sur des points spécifiques. Initialement, on pourrait penser à utiliser JavaScript pour résoudre ce problème. Cependant, il est important de ne pas oublier la puissance du CSS. Pour que l'effet de survol s'applique correctement à toute la carte, il est essentiel de donner à la DIV contenant la carte les dimensions exactes de l'image sous-jacente. Un conseil supplémentaire concerne le contraste des couleurs sur un site web ; un contraste insuffisant entre le blanc et le jaune peut rendre le contenu difficilement lisible.

Dans certains cas, une solution basée sur JavaScript, comme celle proposée par Guiwint, peut s'avérer efficace, bien que l'on préférerait parfois une approche purement CSS. Il est également observé que modifier la transparence d'éléments peut affecter la transparence des points intégrés. Pour contourner ce problème et obtenir un effet de fond transparent avec des points par-dessus, une méthode consiste à utiliser une image de fond (dont la transparence peut être ajustée) combinée à un fichier PNG contenant uniquement les points, placé par-dessus. Une version entièrement en CSS pourrait nécessiter une structure d'images distinctes.

Animation SVG géniale et facile !

Finalement, des solutions, qu'elles soient basées sur JavaScript ou CSS, permettent d'atteindre le résultat souhaité. L'efficacité et la rapidité de résolution de ces problèmes sont souvent dues à la collaboration et aux suggestions de la communauté.

Les Image Maps HTML : Zones cliquables sur une image

Une Image Map HTML, également appelée "carte d'image" ou "carte cliquable", permet de rendre différentes zones d'une image ou d'une vidéo interactives. Ces zones peuvent diriger les utilisateurs vers des liens internes ou externes, ou permettre le téléchargement de fichiers. Les Image Maps améliorent la convivialité d'un site en ajoutant plusieurs liens cliquables à une seule image ou vidéo dans un document HTML. Les destinations multiples au sein d'une même image constituent la grande force de cette technologie.

Création et intégration d'une Image Map HTML

Pour créer une Image Map, on utilise la balise HTML <map>. L'attribut name de cette balise est essentiel pour que l'Image Map puisse être référencée. Ce nom sert d'ancre pour lier et adresser la cible souhaitée dans le graphique ou la vidéo. L'Image Map peut être placée à l'endroit souhaité dans un document HTML. Pour ce faire, on définit des zones et des coordonnées (attribut coords) qui précisent la position, la taille et la forme de la surface de renvoi.

Les zones cliquables peuvent prendre différentes formes : rectangles, polygones ou cercles. L'attribut shape permet de définir ces formes (rect, circle, poly). La syntaxe pour un rectangle (rect) est x1,y1,x2,y2, où (x1,y1) sont les coordonnées du coin supérieur gauche et (x2,y2) celles du coin inférieur droit. L'attribut coords spécifie les coordonnées délimitant une zone cliquable.

Pour qu'une Image Map soit fonctionnelle, il faut au minimum un attribut area. Une fois définie, l'Image Map est intégrée dans un site Web à l'aide de la balise <img>, associée à l'élément <map>. Par exemple, pour une image de plage, on pourrait définir trois zones cliquables : la plage, la mer et le ciel, chacune avec ses attributs de forme et de coordonnées.

Exemple de structure HTML pour une Image Map avec des zones rectangulaires et circulaires

Si vous ne souhaitez pas créer votre Image Map manuellement, des générateurs d'Image Maps HTML sont disponibles pour simplifier le processus.

SVG pour des graphiques vectoriels

Pour la création de visuels vectoriels, on utilise généralement des logiciels de graphisme tels qu'Illustrator. Cependant, il est possible de créer des formes simples, comme des cercles, directement en SVG à l'aide de la balise <svg> et d'une balise <path>. La balise path est particulièrement utile pour créer facilement des cercles et des arcs-de-cercles.

L'attribut stroke-dasharray permet de définir le contour du cercle en segments. Pour un trait continu, sa valeur peut être définie en conséquence. Pour dessiner un arc de cercle correspondant à un pourcentage de cercle, on ajuste la valeur de stroke-dasharray. Par exemple, une valeur de 30, 100 dessinerait un arc correspondant à 30% d'un cercle.

Illustration d'un cercle SVG créé avec des attributs stroke-dasharray pour montrer des segments

Autres considérations de conception web

Dans le contexte de la conception web, plusieurs éléments sont à considérer :

La possibilité de donner des aperçus cliquables d'une page de contenu.
La création de contenus similaires pouvant contenir un lien ou du texte simple.
La proposition du téléchargement d'un fichier, qui peut être initié par un bouton.
Il n'existe pas de groupe de carte dédié, mais des grilles disponibles dans les fondamentaux.
Les dépendances doivent être importées pour certains composants.
Il faut adapter la granularité aux besoins spécifiques.
La hauteur d'un élément peut varier en fonction de son contenu.
Des mises en page spécifiques comme "image en haut et contenu en bas" ou "desktop (image à gauche et contenu à droite)" sont courantes.
Le contenu doit s'adapter à la largeur de la carte.
La gestion des ratios largeur/hauteur est importante (par exemple, 3/4, 2/3, 32/9).
La largeur peut être fixée par celle du contenu, et il est possible de conserver 100% de la hauteur de la carte.
Une icône "arrow-right" peut apparaître en bas à droite, et il est possible de la retirer.
Le lien du titre peut être récupéré depuis un fichier et remplacé automatiquement au chargement du JavaScript.
Certaines fonctionnalités, comme un système de repli, nécessitent l'utilisation de JavaScript.

Dans le but de mettre en valeur des données comme un nombre, une note ou un pourcentage sans alourdir les pages avec des bibliothèques JavaScript, des solutions visuelles simples peuvent être développées. Celles-ci peuvent inclure des graphiques vectoriels créés en SVG, comme des cercles ou des arcs-de-cercles, pour une présentation plus légère et performante.

tags: #html #detourage #graphique #carte