Carte d'image HTML

Préparation de l'image

Pour créer une carte-image, la première étape consiste à choisir une image qui complète le contenu et le design de votre page web. L'image doit être claire, attrayante et pertinente par rapport aux zones cliquables que vous prévoyez de définir. Une fois que vous avez sélectionné une image, assurez-vous qu'elle est adaptée au web en optimisant sa taille et son format. Les images volumineuses peuvent ralentir le chargement de votre page web, il est donc important de trouver un équilibre entre la qualité de l'image et la taille du fichier. Les formats d'image couramment utilisés pour le web incluent JPEG, PNG et GIF.

Après avoir préparé l'image, vous devez déterminer les zones cliquables. Ce sont les régions spécifiques de l'image avec lesquelles les utilisateurs peuvent interagir en cliquant. Considérez la mise en page et le contenu de votre image et décidez quelles zones devraient être cliquables. Vous pouvez utiliser un logiciel d'édition d'images ou des outils en ligne pour déterminer les coordonnées de ces zones, ce qui sera nécessaire lors de la définition de la carte-image.

Utilisation de l'élément <map>

Pour créer une carte-image, vous devez utiliser l'élément <map> dans votre code HTML. L'élément <map> est un conteneur pour les zones cliquables de votre image. Il nécessite un attribut name unique qui identifie la carte-image.

<map name="maCarte-image">
  <!-- les zones cliquables seront définies ici -->
</map>

Remplacez "maCarte-image" par un nom descriptif pour votre carte-image spécifique.

Pour lier la carte-image à votre image, vous devez utiliser l'attribut usemap sur l'élément <img>. La valeur de l'attribut usemap doit être le name de votre carte-image précédé d'un symbole dièse (#).

<img src="image.jpg" alt="Mon Image" usemap="#maCarte-image">

Assurez-vous que le name dans l'attribut usemap correspond au name que vous avez défini dans l'élément <map>.

Définition des zones cliquables avec <area>

À l'intérieur de l'élément <map>, vous pouvez définir les zones cliquables en utilisant l'élément <area>. Chaque élément <area> représente une région spécifique de l'image avec laquelle les utilisateurs peuvent interagir. L'élément <area> a plusieurs attributs qui définissent la forme, les coordonnées et le lien hypertexte de la zone cliquable.

L'attribut shape spécifie la forme de la zone cliquable. Il peut avoir des valeurs telles que "rect" pour une zone rectangulaire, "circle" pour une zone circulaire, ou "poly" pour une zone polygonale.

Les coordonnées de la zone cliquable sont spécifiées en utilisant l'attribut coords. Le format des coordonnées dépend de la forme que vous choisissez. Pour les zones rectangulaires, vous devez fournir les coordonnées des coins supérieur gauche et inférieur droit (x1, y1, x2, y2). Pour les zones circulaires, vous devez fournir les coordonnées du centre et le rayon (centre-x, centre-y, rayon). Pour les zones polygonales, vous devez fournir une série de coordonnées pour chaque point du polygone (x1, y1, x2, y2, ..., xn, yn).

Pour ajouter un lien hypertexte à la zone cliquable, vous utilisez l'attribut href. La valeur de l'attribut href doit être l'URL ou le lien d'ancrage vers lequel vous souhaitez naviguer lorsque la zone est cliquée.

<map name="maCarte-image">
  <area shape="rect" coords="0,0,100,100" href="page1.html" alt="Zone 1">
  <area shape="circle" coords="200,150,50" href="page2.html" alt="Zone 2">
  <area shape="poly" coords="300,50,350,100,300,150" href="page3.html" alt="Zone 3">
</map>

Dans cet exemple, trois zones cliquables sont définies : une zone rectangulaire, une zone circulaire et une zone polygonale. Chaque zone a ses propres coordonnées et lien hypertexte.

En combinant l'élément <map>, l'attribut usemap sur l'élément <img>, et les éléments <area>, vous pouvez créer une carte-image interactive qui permet aux utilisateurs de cliquer sur différentes régions de l'image et de naviguer vers différentes pages ou d'effectuer des actions spécifiques.

Rectangle (shape="rect")

Une zone cliquable rectangulaire est définie en utilisant l'attribut shape="rect". Pour spécifier les coordonnées d'une zone rectangulaire, vous devez fournir les valeurs pour coords dans l'ordre suivant : coords="x1,y1,x2,y2".

<map name="myImageMap">
  <area shape="rect" coords="50,50,200,150" href="rectangle.html" alt="Zone rectangulaire">
</map>

Dans cet exemple, une zone rectangulaire est définie avec le coin supérieur gauche aux coordonnées (50, 50) et le coin inférieur droit aux coordonnées (200, 150). Lorsqu'elle est cliquée, elle naviguera vers la page rectangle.html.

Cercle (shape="circle")

Une zone cliquable circulaire est définie en utilisant l'attribut shape="circle". Pour spécifier les coordonnées d'une zone circulaire, vous devez fournir les valeurs pour coords dans l'ordre suivant : coords="centre-x,centre-y,rayon".

<map name="myImageMap">
  <area shape="circle" coords="300,200,50" href="circle.html" alt="Zone circulaire">
</map>

Dans cet exemple, une zone circulaire est définie avec son centre aux coordonnées (300, 200) et un rayon de 50 pixels. Lorsqu'elle est cliquée, elle naviguera vers la page circle.html.

Polygone (shape="poly")

Une zone cliquable polygonale est définie en utilisant l'attribut shape="poly". Pour spécifier les coordonnées d'une zone polygonale, vous devez fournir une série de coordonnées x et y pour chaque point du polygone dans l'attribut coords : coords="x1,y1,x2,y2,...,xn,yn".

<map name="myImageMap">
  <area shape="poly" coords="400,100,500,150,450,300,350,250" href="polygon.html" alt="Zone polygonale">
</map>

Dans cet exemple, une zone polygonale est définie avec quatre points : (400,100), (500,150), (450,300) et (350,250). Lorsqu'elle est cliquée, elle naviguera vers la page polygon.html.

En utilisant ces différentes formes - rectangles, cercles et polygones - vous pouvez créer des zones cliquables précisément définies sur votre carte d'image. Cela vous permet d'offrir une expérience plus interactive et engageante à vos utilisateurs, leur permettant de cliquer sur des régions spécifiques de l'image pour accéder à du contenu supplémentaire ou effectuer des actions.