Je crée des zones cliquables sur une image

La création d’une image cliquable s’effectue en trois étapes.

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 : bouton « Démarrer » de Windows > « Tous les programmes » > « Accessoires »), j’ouvre une image.

2. Au moyen de l'icône "crayon", 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 pour les coins "haut" et "bas". Un point correspond à deux nombres séparés par une virgule (exemple : « 92,66 »).

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 « Image cliquable » dans l’arborescence des Médias.

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

4. Je clique sur le bouton « Ajouter une zone », puis sur le lien « Nouvelle zone ».

5. Je renseigne les champs suivants :

  •  « Titre » (de la zone réactive ajoutée) ;
  • « Lien » (page sur laquelle l'internaute accèdera en cliquant sur la zone réactive de l'image) : adresse de type « http » ou sélection d’un objet via le bouton « Parcourir » ;
  •  « Ouverture » (du lien) : « dans la page courante », « dans une nouvelle page », « dans une fenêtre popup », « en téléchargement » (fichiers) ;
  • « Accessibilité » : « Ordre de tabulation » et « Touche d’accès » ;
  • « 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 (Voir 1ère étape).

Je clique sur le bouton « Ajouter une zone » si je souhaite créer une autre zone réactive sur l’image.

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

Je renseigne les champs de la classe "Image cliquable"
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ées en utilisant les icônes "modifier" - "supprimer".

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

1. J’insère cette image cliquable dans un contenu en cliquant sur l’icône « image » « Insérer/modifier une image » de la barre d'outils de l’éditeur de texte :

2. Je vérifie en "front office" l'accès au lien indiqué dans l'image cliquable (dans l'exemple ci-dessus, le lien se situe sur l'encadré rouge "IFREMER").

Sachez cependant que l'utilisation de la classe « Image cliquable » n'est pas la solution pour faire un lien vers d'autres éléments. La méthode suivante est bien plus rapide :

1. J'insère dans un contenu une image avec un ancrage « embed-inline ».

2. Je sélectionne l'image insérée.

3. J'insère sur l'image un lien hypertexte qui pointe vers un site web ou un "nœud" du site, ou encore qui ouvre un fichier.

4. Je vérifie en « front office » l'ouverture du lien, soit « dans la même page », soit « dans une nouvelle fenêtre ».