{"id":6713,"date":"2021-07-24T13:39:34","date_gmt":"2021-07-24T11:39:34","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/hotspots-avec-jettricks-ajoutez-des-points-dinformation-a-une-image\/"},"modified":"2026-09-02T22:41:07","modified_gmt":"2026-09-02T20:41:07","slug":"hotspots-avec-jettricks-ajoutez-des-points-dinformation-a-une-image","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/hotspots-avec-jettricks-ajoutez-des-points-dinformation-a-une-image\/","title":{"rendered":"Hotspots avec JetTricks : ajoutez des points d&rsquo;information \u00e0 une image"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Vid\u00e9o \u00e9tape par \u00e9tape<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"JetTricks   Hotspots\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/DBi868er2s8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n<p class=\"wp-block-paragraph\">Dans ce tutoriel, vous apprendrez comment ajouter des points d&rsquo;information \u00e0 n&rsquo;importe quelle image en utilisant les fonctionnalit\u00e9s de l&rsquo;extension <a href=\"https:\/\/crocoblock.com\/plugins\/jettricks\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetTricks<\/a>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"que-es-un-hotspots-17d58bab-c7f5-4926-9bff-570d8d8e030a\">Qu&rsquo;est-ce qu&rsquo;un hotspot ?<\/h2>\n\n<p class=\"wp-block-paragraph\">Un hotspot est un marqueur plac\u00e9 sur l&rsquo;image pour attirer l&rsquo;attention de l&rsquo;utilisateur sur une partie sp\u00e9cifique de celle-ci. En g\u00e9n\u00e9ral, ils sont utilis\u00e9s dans les boutiques en ligne pour proposer \u00e0 l&rsquo;utilisateur des liens vers les produits qu&rsquo;il voit sur une photo promotionnelle. Les points d&rsquo;information sont \u00e9galement souvent compatibles avec des infobulles qui affichent des informations suppl\u00e9mentaires. Ce guide vous montrera comment placer des points d&rsquo;information sur les images de votre site web en utilisant <strong>les<\/strong> widgets de <strong>JetTricks<\/strong>.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"paso1\">\u00c9tape 1 : Choisissez l&rsquo;image<\/h2>\n\n<p class=\"wp-block-paragraph\">Acc\u00e9dez au tableau de bord et recherchez la page ou la publication o\u00f9 vous souhaitez ajouter une image avec des points d&rsquo;information. Modifiez-la avec Elementor. Recherchez le widget <strong>Hotspots<\/strong> dans le menu des widgets sur le c\u00f4t\u00e9 gauche. Glissez-le et d\u00e9posez-le sur la page.   <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"277\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor.png\" alt=\"widget Hotspots\" class=\"wp-image-5018\"\/><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Choisissez l&rsquo;image que vous souhaitez utiliser comme base pour vos points d&rsquo;information. Il est pr\u00e9f\u00e9rable de choisir des photos en haute r\u00e9solution et de bonne qualit\u00e9 si vous voulez que cette partie de la page soit r\u00e9ellement esth\u00e9tique. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"607\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-2.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5019\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-2.jpg 358w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-2-295x500.jpg 295w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/figure>\n<\/div>\n<h2 class=\"wp-block-heading\" id=\"2\">\u00c9tape 2 : Choisissez l&rsquo;image<\/h2>\n\n<p class=\"wp-block-paragraph\">Comme vous pouvez le voir, un point d&rsquo;information est cr\u00e9\u00e9 par d\u00e9faut et plac\u00e9 au centre d&rsquo;une image. Allons dans la section <strong>Hotspots<\/strong> et cliquons sur l&rsquo; <strong>\u00c9l\u00e9ment#1<\/strong>. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"628\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-3.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5013\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-3.jpg 358w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-3-285x500.jpg 285w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Tout d&rsquo;abord, vous pouvez modifier ici le <strong>contenu<\/strong> ou la <strong>position<\/strong> d&rsquo;un point d&rsquo;acc\u00e8s. Vous devriez probablement commencer par le <strong>Contenu<\/strong>. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Ic\u00f4ne<\/strong> : vous pouvez en choisir une dans la biblioth\u00e8que d&rsquo;ic\u00f4nes, charger un fichier SVG ou m\u00eame choisir de ne pas utiliser d&rsquo;ic\u00f4ne.<\/li>\n\n\n\n<li><strong>Texte<\/strong> : les donn\u00e9es que vous saisissez ici s&rsquo;afficheront \u00e0 c\u00f4t\u00e9 de l&rsquo;ic\u00f4ne sur le point d&rsquo;information.<\/li>\n\n\n\n<li><strong>Description<\/strong> : le texte que vous ins\u00e9rez dans cette zone de texte s&rsquo;affichera comme infobulle (Tooltip) de ce point d&rsquo;acc\u00e8s.<\/li>\n\n\n\n<li><strong>Lien<\/strong> : vous pouvez choisir vers o\u00f9 l&rsquo;utilisateur sera dirig\u00e9 lorsqu&rsquo;il cliquera sur le point d&rsquo;information (lien vers une autre page, lien vers une image, popup ou laisser vide).<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Pour modifier la <strong>position<\/strong>, vous disposez de deux curseurs : <strong>Position horizontale (%)<\/strong> et <strong>Position verticale (%)<\/strong>. Vous pouvez d\u00e9placer le point d&rsquo;information en faisant glisser un curseur horizontalement ou en saisissant les valeurs en pourcentage. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"337\" height=\"276\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-4.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5014\"\/><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Il est possible d&rsquo;ajouter (ou de dupliquer un existant) autant de points d&rsquo;information que vous le souhaitez, cliquez simplement sur le bouton \u00ab <strong>Ajouter un \u00e9l\u00e9ment<\/strong> \u00bb. De plus, vous pouvez s\u00e9lectionner l&rsquo;un des effets d&rsquo;animation, qui s&rsquo;appliquera \u00e0 tous les points d&rsquo;acc\u00e8s. Il existe <strong>6 types d&rsquo;animation<\/strong> qui s&rsquo;afficheront en \u00ab mode veille \u00bb, lorsque l&rsquo;utilisateur ne survole pas l&rsquo;image.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"3\">\u00c9tape 3 : D\u00e9finir les param\u00e8tres de l&rsquo;infobulle<\/h2>\n\n<p class=\"wp-block-paragraph\">Comme indiqu\u00e9 pr\u00e9c\u00e9demment, le texte \u00e0 afficher en tant qu&rsquo;infobulle doit \u00eatre saisi dans la zone de texte <strong>Description<\/strong> de l&rsquo;\u00e9l\u00e9ment <strong>Hotspot<\/strong>. Voici d&rsquo;autres param\u00e8tres de personnalisation. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"359\" height=\"598\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-5.jpg\" alt=\"Hotspots JetTricks Crocoblock\" class=\"wp-image-5015\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-5.jpg 359w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/hotspot-widget-elementor-5-300x500.jpg 300w\" sizes=\"auto, (max-width: 359px) 100vw, 359px\" \/><\/figure>\n<\/div>\n<ul class=\"wp-block-list\">\n<li><strong>Show on Init (Afficher \u00e0 l&rsquo;initialisation)<\/strong> : si cette option est activ\u00e9e, les infobulles seront toujours visibles ; lorsqu&rsquo;elle est d\u00e9sactiv\u00e9e, elles n&rsquo;apparaissent qu&rsquo;au survol de la souris.<\/li>\n\n\n\n<li><strong>Placement (Emplacement)<\/strong> : ici, vous pouvez choisir o\u00f9 afficher les infobulles : au-dessus du point d&rsquo;information, en dessous, \u00e0 gauche ou \u00e0 droite.<\/li>\n\n\n\n<li><strong>Animation (Animation)<\/strong> : vous pouvez choisir parmi 5 types d&rsquo;animation pour l&rsquo;apparition de l&rsquo;infobulle.<\/li>\n\n\n\n<li><strong>Animation Delay (D\u00e9lai d&rsquo;animation)<\/strong> : la valeur qui d\u00e9finit le temps entre l&rsquo;activation du d\u00e9clencheur et l&rsquo;apparition de l&rsquo;infobulle.<\/li>\n\n\n\n<li><strong>Appearance Duration (Dur\u00e9e d&rsquo;apparition)<\/strong> : c&rsquo;est une valeur qui d\u00e9finit la vitesse de l&rsquo;animation avec laquelle l&rsquo;infobulle appara\u00eet apr\u00e8s le d\u00e9clenchement.<\/li>\n\n\n\n<li><strong>Disappearance Duration (Dur\u00e9e de disparition)<\/strong> : cette valeur d\u00e9finit la rapidit\u00e9 avec laquelle l&rsquo;infobulle sera masqu\u00e9e apr\u00e8s que le pointeur a quitt\u00e9 le point d&rsquo;information.<\/li>\n\n\n\n<li><strong>Trigger (D\u00e9clencheur)<\/strong> : cette option d\u00e9finit quand l&rsquo;infobulle sera affich\u00e9e. \u00ab Mouse Enter \u00bb signifie que l&rsquo;infobulle s&rsquo;affichera lorsque le pointeur entrera dans les limites du point d&rsquo;information (hotspot). \u00ab Click \u00bb fera appara\u00eetre l&rsquo;infobulle lorsque l&rsquo;utilisateur cliquera sur le point d&rsquo;information. \u00ab None \u00bb fait en sorte que l&rsquo;infobulle ne s&rsquo;affiche jamais.   <\/li>\n\n\n\n<li><strong>Use Arrow (Utiliser une fl\u00e8che)<\/strong> : lorsque cette option est activ\u00e9e, l&rsquo;infobulle comporte une petite fl\u00e8che pointant vers le point d&rsquo;information.<\/li>\n\n\n\n<li><strong>Distance (Distance)<\/strong> : il y a un espace entre l&rsquo;infobulle et le bord du point d&rsquo;acc\u00e8s, et cette valeur d\u00e9finit la taille de cet espace.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"4\">\u00c9tape 4 : Modifiez les styles \u00e0 votre guise<\/h2>\n\n<p class=\"wp-block-paragraph\">Allez dans l&rsquo;onglet <strong>Style<\/strong> et modifiez le design des points d&rsquo;information (Hotspots) et des infobulles selon vos go\u00fbts et vos besoins.<\/p>\n\n<p class=\"wp-block-paragraph\">Une fois tous les r\u00e9glages effectu\u00e9s, actualisez la page et observez l&rsquo;image sur l&rsquo;interface. Placez le curseur sur le point d&rsquo;information et l&rsquo;infobulle appara\u00eetra imm\u00e9diatement. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vid\u00e9o \u00e9tape par \u00e9tape Introduction Dans ce tutoriel, vous apprendrez comment ajouter des points d&rsquo;information \u00e0 n&rsquo;importe quelle image en utilisant les fonctionnalit\u00e9s de l&rsquo;extension JetTricks. Qu&rsquo;est-ce qu&rsquo;un hotspot ? Un hotspot est un marqueur plac\u00e9 sur l&rsquo;image pour attirer l&rsquo;attention de l&rsquo;utilisateur sur une partie sp\u00e9cifique de celle-ci. En g\u00e9n\u00e9ral, ils sont utilis\u00e9s dans [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6714,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Hotspots avec JetTricks : enrichissez vos images","_seopress_titles_desc":"Dans ce tutoriel, vous apprendrez comment ajouter des points d'information \u00e0 n'importe quelle image en utilisant les fonctionnalit\u00e9s de l'extension JetTricks. Qu'est-ce qu'un hotspot ? Un\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[436],"tags":[431,437],"class_list":["post-6713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-crocoblock","tag-conception-web","tag-contenu-dynamique"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=6713"}],"version-history":[{"count":2,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6713\/revisions"}],"predecessor-version":[{"id":6717,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6713\/revisions\/6717"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/6714"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=6713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=6713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=6713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}