Définition du code HTML d'une image cliquable

Lorsque vous créez ou modifiez un contenu marketing qui est une image, vous pouvez créer l'image comme une image cliquable. Une image cliquable permet aux responsables marketing de spécifier plusieurs zones dans lesquelles il est possible de cliquer au sein d'une image.

Par exemple, si votre magasin affiche des images contenant plusieurs produits distincts, vous pouvez indiquer une image cliquable unique pour inclure des actions de clic pour chacun des produits. Vous pouvez définir une zone d'action de clic pour chaque produit ou promotion pour permettre à un client de cliquer sur chaque section de l'image afin d'ouvrir un produit ou une page de magasin. D'autres actions de clic prédéfinies sont disponibles, comme par exemple l'ajout d'un article à un panier ou d'un bon de réduction au portefeuille de bons de réduction d'un client.

Pour créer une image cliquable dans le Centre de gestion, un responsable marketing peut indiquer des zones d'action de clic individuelles dans la table Zones ou spécifier du code source HTML dans la vue des propriétés du contenu marketing. Si vous êtes un professionnel connaissant bien le code HTML, ou si vous aidez un professionnel dans la création d'une image cliquable, vous pouvez définir toute l'image cliquable avec du code HTML. Pour définir le code source HTML d'une image cliquable, utilisez l'exemple ci-après.

La capture d'écran suivante fournit un exemple d'image cliquable : Image cliquable

Le code source HTML suivant définit l'image cliquable précédente lorsqu'elle est incluse dans la zone HTML lorsque vous créez ou modifiez un contenu marketing :
1<map name="[contentId]">
2<area shape="rect" coords="62,228,195,251" href="[contextPath]/[CategoryDisplay?categoryId=10003]" title="Shop Blouses" alt="Blouses" target="_self" />
3<area shape="rect" coords="62,253,183,277" href="[contextPath]/[CategoryDisplay?categoryId=10002]" title="Shop Skirts" alt="Skirts" target="_self"  />
4<area shape="rect" coords="62,278,217,302" href="[contextPath]/[CategoryDisplay?categoryId=10001]" title="Shop Handbags" alt="Handbags" target="_self" />
</map>

1 - Le nom de l'image cliquable doit être au format <map name="[contentId]">. Ce code est utilisé pour associer le code HTML indiqué qui définit l'image cliquable avec l'image spécifiée dans le contenu marketing. Le nom de l'image cliquable doit être défini comme une variable de substitution : [contentId].

2 - 4 - Ces lignes de code définissent les zones d'action de clic individuelles au sein de l'image cliquable. Lorsque vous définissez les zones d'action de clic, vous devez spécifier les propriétés suivantes :
  • shape - Rectangle, cercle ou polygone. Indiquez les coordonnées de la forme choisie. Ces coordonnées identifient la taille et l'emplacement de la zone d'action de clic. Vous devez récupérer ces informations de coordonnées auprès d'un développeur ou du fournisseur de votre image.
  • coords - Les coordonnées pour chaque forme doivent être au format suivant :
    • Rectangle : Indiquez les coordonnées des angles supérieur gauche et inférieur droit. Définissez ces deux coordonnées au format suivant : X1, Y1, X2, Y2 (où X1, Y1, est la coordonnée supérieure gauche et X2, Y2 la coordonnée inférieure droite).
    • Cercle : Indiquez le point central pour le cercle et le rayon. Définissez le centre du cercle et le rayon au format suivant : X, Y, Rayon (où X, Y sont les coordonnées horizontale et verticale du centre du cercle, et R le rayon du cercle).
    • Polygone : Vous devez spécifier au moins six coordonnées et un nombre de coordonnées pair pour un polygone. Utilisez le format X1, Y1, X2, Y2, ... Xn, Yn
  • href - URL qui s'ouvre lorsqu'un client clique sur la zone d'action de clic. Vous devez spécifier une URL href pour chaque zone que vous incluez dans le code HTML. Préfixez le chemin href avec le contexte ou le chemin de servlet de l'adresse URL ou du chemin de l'image. Par exemple : [webapp/wcs/preview/servlet]/[CategoryDisplay?categoryId=10001]
  • title - Infobulle qui s'affiche lorsqu'un client survole la zone d'action de clic.
Vous pouvez également préciser les propriétés facultatives suivantes dans le code HTML :
alt
Texte de remplacement pour la zone d'action de clic.
cible
Emplacement d'affichage de la page URL. Par exemple, _blank, _parent, _self, _top.
Remarque : Dans votre code HTML, vous pouvez inclure des paramètres remplaçables afin d'inclure des images et des liens supplémentaires. Lorsque vous utilisez ces paramètres dans les chemins de fichiers vers vos images et vos liens, ces chemins de fichiers fonctionnent à la fois dans la vitrine et dans l'aperçu du magasin sans qu'aucune modification ne soit nécessaire. Auparavant, vous deviez modifier le chemin de fichier vers une image ou un lien selon que vous souhaitiez afficher l'image ou le lien dans la vitrine ou dans l'aperçu du magasin. Pour plus d'informations, consultez la rubrique Variables de substitution pour la saisie du code HTML dans le Management Center