Une zone cliquable est une partie d’une image, d’une page de catalogue électronique ou d’une image dans une visionneuse à 360°, qui affiche un panneau de survol avec du texte. Lorsque l’utilisateur sélectionne une zone cliquable, une action d’une sorte ou d’une autre est déclenchée. Par exemple, une page Web affiche des informations détaillées sur un produit. Un contour s’affiche autour d’une zone cliquable lorsque l’utilisateur déplace le pointeur dessus.
Outre la possibilité de créer des zones cliquables dans Adobe Dynamic Media Classic, vous pouvez également créer des zones cliquables lors de la conception d’un catalogue dans Adobe Acrobat ou Adobe InDesign.
Lorsque vous créez des zones cliquables, vous pouvez effectuer l’une des opérations suivantes :
Effectuez l’une des opérations suivantes :
Tracez une zone cliquable rectangulaire ou polygonale (avec de nombreux côtés) :
Carte rectangulaire - Sélectionnez l’outil de zone cliquable Rectangle et faites glisser sur la page pour créer le rectangle. Pour ajouter un point à une carte rectangulaire (pour le transformer en map polygone), appuyez sur Ctrl, puis placez l’outil d’insertion à l’emplacement souhaité et sélectionnez.
map polygonal - Sélectionnez l’outil de zone cliquable polygonal et sélectionnez des points sur le périmètre de la zone de l’image que vous souhaitez encadrer. A l’aide du curseur de densité du polygone, modulez la densité du point. La densité initiale est conservée si vous sélectionnez d’autres zones. En revanche, si vous ajoutez, supprimez ou modifiez un point du polygone, la densité initiale est perdue et le curseur revient à la valeur maximale.
Nommez la zone cliquable, si vous le souhaitez, dans la liste Zone cliquable. Après avoir dessiné une zone cliquable, Adobe Dynamic Media Classic lui attribue un nom.
Pour créer le nom, Adobe Dynamic Media Classic ajoute un numéro séquentiel au nom de l’image ou de la page de catalogue électronique que vous utilisez. Vous pouvez indiquer le nom de votre choix.
Si vous souhaitez que les utilisateurs ouvrent une nouvelle page web lorsqu’ils sélectionnent la zone cliquable, saisissez l’URL dans la liste Zone cliquable.
Voir Utilisation d’un modèle pour définir du code JavaScript et des URL.
Pour qu’un texte de survol s’affiche lorsque les utilisateurs déplacent le pointeur sur la zone cliquable, saisissez le texte dans la liste Zone cliquable. Dans la liste Zone cliquable, sélectionnez la variable Afficher et sélectionnez Texte de survol. Saisissez ensuite le texte que vous souhaitez que les utilisateurs voient à l’écran. Vous pouvez rédiger le texte dans une application de traitement de texte et le copier dans le champ Texte de survol.
Si vous souhaitez qu’une autre action se déclenche lorsque les utilisateurs déplacent la souris sur une zone cliquable, définissez l’action. Dans le Afficher liste déroulante, sélectionnez Autres actions. Spécifiez les attributs de l’action. (Accédez à Afficher > Les pour créer du texte de survol et une action pour une zone cliquable.)
(Facultatif) Utilisez l’une des méthodes suivantes :
Sélectionner Enregistrer.
Pour modifier la position, la forme et la taille d’une zone cliquable, cliquez sur le bouton Zone cliquable. Sélectionnez ensuite le Panoramique et suivez ces instructions :
Modifier la position - Déplacez le pointeur près de la bordure de la zone cliquable, mais pas dessus. Lorsque le pointeur prend la forme d’une flèche à quatre pointes, faites glisser la zone à l’emplacement voulu.
Modifier la taille et la forme - La manière dont vous modifiez la forme et la taille d’une zone cliquable varie selon que vous utilisez une zone cliquable rectangulaire ou polygonal :
Vous pouvez faire glisser le curseur Taille situé dans la partie inférieure de l’écran pour modifier les vues et avoir une idée plus précise de l’aspect de votre zone cliquable.
Zone cliquable rectangulaire - Déplacez le pointeur sur un côté ou un coin de la zone cliquable. Lorsque le pointeur prend la forme d’une flèche à double pointe, faites glisser la souris. Maintenez la touche Maj enfoncée lorsque vous faites glisser la souris pour modifier la taille tout en conservant le format (la forme).
Zone cliquable polygonal - Faites glisser une poignée de sélection carrée. Pour créer une poignée de sélection, sélectionnez la bordure de la zone cliquable et commencez à la faire glisser.
Si votre image (ou page de catalogue électronique) comprend plusieurs zones cliquables et si ces zones se superposent, vous pouvez contrôler cette superposition. Pour ce faire, changez l’ordre des zones dans la liste Zone cliquable en faisant glisser leur nom vers le haut ou vers le bas. Une position élevée dans la liste indique que la zone cliquable associée se superpose avec d’autres zones cliquables.
Plutôt que de saisir les données de zone cliquable sur chacune des pages, vous avez la possibilité d’importer les données de l’ensemble de votre image, visionneuse à 360° ou catalogue électronique dans l’écran Résumé de zone cliquable. Vous importez les données de zone cliquable sous la forme d’un fichier délimité par des tabulations ou d’un fichier DTD XML. Les champs du fichier doivent être dans l’ordre indiqué sur l’écran de résumé de zone cliquable : Nom, Etiquettes de table des matières, Zones, URL, Texte de survol, Autres actions et Chaînes de recherche. Vous évitez ainsi d’avoir à saisir les données dans la liste de zones cliquables au fur et à mesure que vous créez ces dernières.
Pour importer des données de zone cliquable:
Vous pouvez copier des zones cliquables d’une image (ou d’une page de catalogue électronique) à l’autre. Utilisation Copier la zone cliquable pour commencer à les créer. Vous pouvez également copier les zones cliquables pour les recréer dans des images ou des pages partageant la mise en page ou la structure de mappage.
Par exemple, copier des zones cliquables dans un catalogue électronique permet de copier facilement toutes les zones cliquables entre les versions de langue étrangère du même catalogue électronique. Pour obtenir de meilleurs résultats, il est préférable d’effectuer une copie entre des catalogues électroniques ayant le même nombre de pages et les mêmes images. Si le catalogue électronique dans lequel vous copiez déjà contient des zones cliquables, ces zones cliquables sont supprimées lors de la copie.
Pour copier des zones cliquables:
Aller à la page d’édition des zones cliquables (pour des images ou des images dans des visionneuses à 360°) ou l’onglet Pages de zones de l’écran d’édition du catalogue électronique.
Sélectionner Copier les mappages vers.
Effectuez l’une des opérations suivantes, selon que vous souhaitiez copier des zones cliquables à partir d’images ou à partir d’un catalogue électronique :
Choisir Sélectionner.
Vous pouvez définir un modèle d’URL (également appelé modèle Href) pour faciliter et améliorer la saisie des URL de zones cliquables. Définissez un modèle d’URL si la plupart des URL des zones cliquables partagent un format commun et fixe. Si vous définissez la partie de l’URL fixe comme modèle d’URL, vous êtes dispensé de l’entrer chaque fois que vous créez une zone cliquable. Le modèle d’URL peut également contenir des commandes JavaScript, des chemins d’accès et des paramètres. Par défaut, le modèle d’URL contient un gestionnaire JavaScript Adobe Dynamic Media Classic propriétaire appelé loadProduct
qui ouvre l’image dans une nouvelle fenêtre.
Lorsque vous ajoutez le code JavaScript dans l’attribut HREF de votre zone cliquable, celui-ci est exécuté sur l’ordinateur du client. Par conséquent, assurez-vous que le code JavaScript est sécurisé.
Avec un modèle d’URL, le contenu de la colonne URL dans la liste Zone cliquable est remplacé par le double signe dollar ($$) dans le modèle :
Javascript:loadProduct(‘$$’);void(0);
Vous placez toutes les valeurs qui ne changent pas entre les zones cliquables dans le modèle d’URL. N’ajoutez que les valeurs variables dans la colonne URL de la liste Zone cliquable. Par exemple :
javascript:loadProduct(‘https://www.examplesitehere.com/$$’);void(0);
product.htm
javascript:loadProduct(‘https://www.examplesitehere.com/product.html);void(0);
Par défaut, le modèle d’URL comprend un gestionnaire JavaScript Adobe Dynamic Media Classic propriétaire appelé loadProduct
qui ouvre une nouvelle fenêtre avec la destination de l’URL. Cependant, vous pouvez utiliser n’importe quel code JavaScript pour remplacer ce gestionnaire JavaScript ou utiliser l’un des gestionnaires Adobe Dynamic Media Classic suivants :
loadProductCW
- Affiche l’URL cible spécifiée dans la colonne URL de la fenêtre active. Ce code est réservé principalement aux catalogues électroniques intégrés dans une page d’un site Web.
loadProductPW
- Affiche l’URL cible spécifiée dans la colonne URL de la fenêtre parente (la page d’où la page active a été ouverte). La fenêtre active reste ouverte, mais la fenêtre parent change pour afficher l’URL cible.
Le code loadProductPW
ne prend pas en charge les visionneuses DHTML et HTML5.
La page Editeur de zone cliquable (images et visionneuses à 360°) et l’onglet Pages de zones de l’écran Catalogue électronique (catalogues électroniques) contiennent les commandes de gestion des modèles d’URL suivantes :
Option Modèle d’URL - Sélectionnez l’option Modèle d’URL pour appliquer votre modèle d’URL à toutes les zones cliquables d’une image ou d’une page de catalogue électronique.
Option Modèle - Désélectionnez une option Modèle dans la liste Zone cliquable des URL si vous ne souhaitez pas qu’une zone cliquable individuelle utilise le modèle d’URL.
Vous pouvez sélectionner la variable Afficher et choisissez Autres actions pour déclencher des actions autres que le texte de survol et les lancements de pages web. Lorsque l’utilisateur amène le pointeur sur une zone cliquable, vous pouvez initier une action. Ces actions sont des attributs définis pour les zones cliquables côté client conformément aux spécifications HTML du consortium WWW (World Wide Web). Elles comptent notamment :
accesskey
- Déclenche une action lorsque l’utilisateur appuie sur la touche spécifiée du clavier.
onfocus
- Déclenche un événement lorsque la zone cliquable devient active grâce au curseur, à une tabulation ou à une touche d’accès. Par exemple, vous pouvez lancer une page Web lorsque la zone cliquable devient active et la refermer lorsqu’elle ne l’est plus.
onblur
- Déclenche un événement lorsque la zone cliquable n’est plus active, grâce au curseur ou à la tabulation.
Pour définir d’autres actions pour les zones cliquables:
Sélectionnez la Afficher et sélectionnez Les si vous souhaitez qu’une zone cliquable comporte un texte de survol et une action.
Vous pouvez créer des zones cliquables lors de la conception de votre catalogue électronique dans Adobe Acrobat ou Adobe InDesign.
Dans Adobe Acrobat ou Adobe InDesign, créez des références de lien hypertexte à l’emplacement où vous souhaitez que les zones cliquables apparaissent, puis spécifiez l’emplacement des URL de la zone cliquable. Lorsque vous sélectionnez l’option Extract Links (Extraire les liens) lors du téléchargement du fichier du PDF dans Adobe Dynamic Media Classic, les liens sont automatiquement convertis en zones cliquables.
Pour plus d’informations, voir Aide d’Adobe InDesign ou Aide d’Adobe Acrobat.
Dans Adobe InDesign, accédez à Windows® > Interactif > Hyperliens.
Dans le panneau Hyperliens, sélectionnez le texte, le cadre ou le graphique à transformer en zone cliquable.
Sélectionner Nouveau lien hypertexte dans le menu du panneau.
Dans la boîte de dialogue Nouveau lien hypertexte, dans la Lier à menu, choisissez URL.
Saisissez ou collez l’ID du produit dans la zone URL.
Sélectionner OK. (Adobe Dynamic Media Classic complète l’URL à l’aide du modèle d’URL de zone cliquable.)
Vous n’avez pas besoin de définir les options d’aspect dans Adobe InDesign. Vous pouvez spécifier l’aspect dans Adobe Dynamic Media Classic.
Répétez les étapes 2 à 6 pour toutes les zones cliquables que vous souhaitez créer.
Exportez les fichiers au format PDF.
Téléchargez le PDF vers Adobe Dynamic Media Classic.
Dans Options de PDF, sélectionnez Extraction de liens.
Vous n’avez pas besoin de définir les options d’aspect dans Adobe Acrobat. Vous pouvez spécifier l’aspect dans Adobe Dynamic Media Classic.