Création d’une image cliquable

Pour ce tuto, je prends en exemple un plan représentant les différents lieux de culte de la
paroisse de la Trinité à Poitiers

I. Image maps

a) Add new image map – Ajouter une nouvelle image pour zones cliquables

b) Sélection de l’image

Mettez un titre et dans le bloc « Image » sélectionnez dans votre ordinateur une image en JPG ou PNG et « Publier ».

c) Création des zones cliquables

Lorsque vous avez téléchargé votre image, créez les zones cliquables. Avec votre souris, réalisez le contour de votre zone (1). Elle est visible pour une couche ombrée qui se pose dessus. Les contours peuvent être créés de différentes formes.
Traduction du texte de « Add area »
« Instructions pour la mise en forme de la zone Commencez à créer la forme de la nouvelle zone en cliquant sur l’image de la carte d’image à gauche. Le premier et le dernier point du chemin sont joints automatiquement Quand la forme est prête, appuyez sur le bouton ci-dessous. »

« Undo » : Défaire « Add areas » : Ajouter des zones

Cliquez sur « Add area » (2)

Donnez un nom à la zone « Title » (3)

Sauvegarder « Save » (4)

Reprendre au (1) pour refaire autant de zones que vous le désirez. Elles se mettent les unes en dessous des autres dans le bloc « Areas ».

Puis « Mettre à jour »

II. Image maps ares

(Permet d’activer les zones cliquables)

a) Sélection d’une zone

Sélectionner « All image map areas » dans « Image map areas ». On y retrouve les zones avec leurs noms.

b) Créer un lien

Sélectionner « All image map areas » dans « Image map areas ». On y retrouve les zones avec leurs noms.
Dans le bloc « Mousse event », 3 propositions se présentent :

  • « Link » : Lien
  • « Tooltip » : Infobulle
  • « Popup window » : Apparition d’une fenêtre

c) Aller chercher l’URL

En ce qui me concerne, je veux créer un lien sur la zone cliquable. J’utilise donc « Link ». Le plus simple, je trouve, est d’aller ouvrir la page en question, copier son URL et venir le coller dans « Link to an url address ».

  • Ouvrir la page ou l’article concernée
  • Sélectionner l’URL
  • Copier l’URL (ctrl + c)

d) Coller l’URL

  • Retourner dans la page « Edit Image map area »
  • Seléctionner « Link » (1) puis « Link to an url adress » (2)
  • Coller l’URL précédemment copiée (Ctrl + v). (3)
  • Vous pouvez spécifier la couleur du survol de la souris (4)
  • « Mettre à jour » (5)

Répéter autant de fois que vous avez créé de zones !
« All image map areas »…



… votre image cliquable est prête à être insérée dans votre page / article.

III. Insertion de l’image cliquable

a) Sélectionner la page/article

  • Allez dans la page/article concerné.
  • Modifier la page/article
  • Dans Visual Composer créez « un bloc texte »
  • « Ajoutez un média »
  • Cliquez sur « Image map »
  • Sélectionner votre image
  • « Sauvegarder les modifications »
  • « Mettre à jour »

Le tuto au format .pdf en cliquant ICI

Tuto  : Xavier Guilloteau – Diocèse de Poitiers