Médiaforma

Images réactives, une première approche

Print Friendly

Les images réactives sont composées de différentes parties sur lesquelles l’internaute peut cliquer pour accéder à différentes pages Web. A titre d’exemple, vous pourriez créer une carte de France dans laquelle l’internaute pourrait cliquer sur chaque département pour obtenir des informations complémentaires. Dans cette première approche des images réactives, nous allons rester très simples en utilisant une image carrée de 200 pixels sur 200, contenant quatre zones de même taille.

La zone 1 s’étend des coordonnées 0,0 à 100, 100. La zone 2 des coordonnées 101,0 à 200, 100, la troisième des coordonnées 0,101 à 100, 200 et la quatrième des coordonnées 101, 101 à 200, 200.

Pour définir une image réactive, vous devez dans un premier temps créer une balise <map> et lui donner un nom avec l’attribut name. Ici, la balise <map> a pour nom « monimagemap ».

Les différentes zones sensibles sont définies à l’aide de balises <area>, incluses dans la balise <map>.

Dans cet exemple, nous utilisons quatre balises <area> pour définir les quatre zones carrées de l’image. Chacune de ces balises <area> utilise trois attributs :

  • shape pour définir la forme de la zone ;
  • coords pour définir les coordonnées de la zone ;
  • href pour définir la page à afficher lorsque la zone est cliquée.

La ligne 7 s’intéresse à la première zone cliquable, représentée par le carré de couleur rouge. La forme de la zone est rectangulaire, les coordonnées du coin supérieur gauche sont 0,0. Le premier zéro correspond à l’abscisse et le deuxième à l’ordonnée. La page affichée est une hypothétique page1.html.

La ligne 8 s’intéresse à la deuxième zone cliquable, représentée par le carré de couleur jaune. Ici encore, la forme est rectangulaire. Les coordonnées du coin supérieur gauche sont égales à 101 pour l’abscisse et 0 pour l’ordonnée. Quant aux coordonnées du coin inférieur droit, elles sont égales à 200 pour l’abscisse et 100 pour l’ordonnée.

Les lignes 9 et 10 décrivent les deux autres zones cliquables selon le même principe.

Une fois la balise <map> entièrement définie, il suffit d’y faire référence à travers l’attribut usemap de la balise <img>.

Comme vous pouvez le voir dans la barre d’état, le survol de chaque zone renvoie vers la page qui lui a été liée.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply