Alimenter et administrer un site eZiweb
Vous êtes dans :
Mots-clés : crée, image, cliquable, "image, map"

15. Je crée une image cliquable "image map"

Il est possible de déterminer des zones réactives sur une image qui pointent vers des adresses de type « http » , "mailto :" ou des fichiers. Pour cela, il est nécessaire d'utiliser la classe « image cliquable » associée à une classe « image ».

1re étape : je détermine les coordonnées des points délimitant les zones cliquables de l'image

1. Dans un éditeur graphique (« Paint » par exemple), j'ouvre une image.

2. Je positionne la souris sur les points de l'image qui délimiteront les zones réactives voulues (qui peuvent être un rectangle, d'un cercle ou d'un polygone) et je note les coordonnées de ces points. Un point correspond à deux nombres séparés par une virgule (exemple : « 92,66 ») :

Je détermine les coordonnées des points délimitant les zones cliquables de l'image.

2e étape : je crée les objets « Image » et « Image map » dans eZiweb

1. Je crée un objet « Image » dans l'arborescence des médias.

2. Je crée un objet « ImageMap » dans l'arborescence des médias.

3. Dans le champ "Image", je sélectionne l'objet « Image » créé précédemment dans ma médiathèque, via le bouton "Parcourir".

4. Je clique sur le bouton « Ajouter une zone ».

5. Je renseigne les champs suivants :

Titre (de la zone réactive ajoutée),

Lien (adresse de type « http », sélection d'un objet via le bouton Parcourir », etc.) : page sur laquelle l'internaute accédera en cliquant sur la zone réactive de l'image,

Ouverture (du lien) : « dans la page courante », « dans une nouvelle page », « dans une fenêtre popup », « en téléchargement »,

Géométrie (forme de la zone réactive) : « Région entière » (toute l'image), « Région rectangulaire » (rectangle), « Région circulaire » (cercle), « Région polygonale » (polygone). En fonction du type de région choisi, je complète les coordonnées des points requis.

6. J'enregistre les propriétés de la zone cliquable en cliquant sur le bouton « Sauvegarder la zone » :

Je renseigne les champs de l'objet "Image Map".

Notez qu'il est possible :

  • de créer plusieurs zones cliquables différentes sur la même image en cliquant autant de fois que nécessaire sur le bouton « Ajouter une zone » ;
  • de modifier et supprimer des zones réactives précédemment crée en utilisant les boutons suivants :

Je modifie et supprime des zones réactives précédemment crées en utilisant ces pictogrammes.

7. Je publie l'objet « ImageMap » en cliquant sur le bouton « Envoyer pour publication ».

3e étape : j'insère l'image cliquable dans un contenu

Dans l'arborescence des contenus, j'insère cette image cliquable dans un objet en cliquant sur l'icône du trombone « Insérer/modifier un objet » de la barre des outils de l'éditeur de texte.