Marche à suivre pour mapper une image

L’exemple qui suit est réalisé avec Toma Web Image Mapper (disponible gratuitement au :  http://www.tomaweb.com/software/downloads/twmap.exe). Le mapping d’une zone d’une image aurait pu être fait avec n’importe quel logiciel permettant la création de map d’images.

Dans TOMAWEB

• Ouvrez TomaWeb Image Mapper 1.0.

• Dans la barre de menu horizontale, sélectionner File, puis Load Image.
• Dans la fenêtre permettant de parcourir votre ordinateur, choisir l’endroit où se trouve l’image à mapper (voir ci-dessous).

• Dans Fichiers de type, choisir l’extension de l’image à mapper.

• Double cliquer sur le document pour qu’il s’insère dans TomaWeb (voir ci-dessous).

• Délimiter la zone cliquable avec les pointillés jaune et rouge : Polygon Tool, Rectangle Tool ou Circle Tool (4^e, 5^e et 6^e éléments dans la barre d’outils) en cliquant directement sur l’image.
• Une fois la zone à rendre cliquable définie, cliquer sur Deselect Tool (flèche blanche).
• Remplir la Map Area Properties :

Area Name : Inscrire ici le nom référence du map, sans accents, espaces ou caractères spéciaux (ex : abrege)

Destination URL : Inscrivez l’adresse de destination finale, soit l’URL sur lequel l’utilisateur se rendra en cliquant sur la zone créée.

Destination Target : Choisir    _BLANK   avec la flèche de droite  pour ouvrir une nouvelle fenêtre. Si le champ est laissé tel qu’il est, avec aucune sélection, le document ouvrira dans la même page.

• Cliquer sur OK.
• Dans la barre d’outils, cliquer sur le bouton Html (Generate HTML Code).
  
• Sélectionner et copier le map de la fenêtre suivante (le map débute toujours par un tag « map » inclusivement) :

Voici le texte qui nous intéresse :

DANS LE SITE WEB

• Ouvrir le site Web et passer en mode Édition.
• Se rendre à la page dans laquelle l’image sera insérée.
• Créer une boîte Texte.
• Cliquer sur Insérer/Éditer une image. 
• Choisir votre image dans votre répertoire et cliquer sur OK. On peut également transférer l’image sur WebDav si ce n’est déjà fait. Ensuite, l’image apparaîtra dans l’espace texte. Surtout, ne changez pas le format!
  
  
  
  
  
  
• Conserver la sélection et cliquer une 2^e fois sur le bouton
  Insérer/Éditer une image.

• Dans Nom du map, inscrire son nom tel que défini dans le champ « Area name » dans TomaWeb. Dans l’exemple ci haut, il s’agit de « abrege » (sans accent).
• Cliquer sur OK.
• Choisir l’onglet Code html et coller le map à cet endroit (copié précédemment), AU DÉBUT DU CONTENU HTML, AVANT TOUT CE QUI SE TROUVE DANS LA BOÎTE TEXTE.
• Cliquer sur OK.

SI L’ON NE POSSÈDE PAS L’ADRESSE DE DESTINATION AU MOMENT DE CRÉER LE MAP

• Dans Wysiwygpro, taper un mot afin de créer un lien sur ce mot vers votre document (PDF, page Web).
• Une fois le lien créé, cliquer sur l’onglet Prévisualisation de Wysiwygpro.
• Cliquer avec le bouton de droite de votre souris sur le mot qui vient d’être rendu cliquable.
• Faire Copier le raccourci.
• Cliquer sur le bouton « Annuler » de Jahia pour fermer cette fenêtre. Retourner sur l’image mappée, en mode ÉDITION pour la modifier.
• Sélectionner l’onglet Code html.