Médiaforma

Plus loin avec les images réactives

Print Friendly

Dans la rubrique précédente, vous avez appris à mettre en place des zones réactives élémentaires « à la main », c’est-à-dire en définissant une par une les balises <area>. L’exemple était élémentaire puisqu’il consistait à définir quatre zones carrées de 100×100 pixels dans un carré de 200×200 pixels.

Il peut être intéressant de définir des zones réactives en utilisant des cercles et/ou des polygones. Vous pouvez procéder comme dans la rubrique précédente, mais cela risque vite de devenir rébarbatif. Dans cette rubrique, je vais vous montrer comment utiliser un programme en ligne pour faciliter la création de zones réactives rectangulaires, circulaires ou polygonales.

Ouvrez votre navigateur et rendez-vous sur la page http://www.maschek.hu/imagemap/imgmap.

En face du libellé Use an image on your computer, cliquez sur Parcourir et désignez l’image à utiliser dans vos unités de masse. Cliquez sur Upload puis sur Accept.

Il ne vous reste plus qu’à choisir une forme dans la liste déroulante, à délimiter la zone concernée avec la souris, et à définir la page cible.

Ici par exemple, nous choisissons circle dans la première liste déroulante et nous dessinons un cercle dans l’image. Comme vous pouvez le voir, la zone de texte Coords est automatiquement remplie en fonction du tracé. La page visée a pour nom cercle.html.

Nous allons tracer un polygone autour de la flèche. Nous sélectionnons polygon dans la deuxième liste déroulante et nous traçons le polygone. Un Shit+clic met fin au tracé. La page visée a pour nom fleche.html.

Un clic sur l’icône Get image map HTML et la balise <map> est affichée dans la partie inférieure de la page.

Il ne reste plus qu’à copier ce code dans Notepad++. Nous mettons un peu d’ordre pour que le code soit plus lisible, puis nous faisons coïncider l’attribut usemap de la balise <img> et l’attribut name de la balise <map>.

Le code est sauvegardé et exécuté dans Firefox. Comme vous pouvez le voir les deux zones réactives suivent bien le tracé qui a été défini sur le site Online Image Map Editor.

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

No comments yet.

Leave a Reply