{"id":124678,"date":"2021-12-30T16:16:34","date_gmt":"2021-12-30T15:16:34","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-interactive-images\/"},"modified":"2025-02-03T16:44:37","modified_gmt":"2025-02-03T15:44:37","slug":"how-to-create-interactive-images","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/comment-prototyper-images-interactives","title":{"rendered":"Comment prototyper des images interactives"},"content":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper une image interactive. Vous d\u00e9finirez une r\u00e9gion sur une image afin qu&rsquo;un texte apparaisse lorsque vous passez la souris dessus. <\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73249312\/index.html\" width=\"820px\" height=\"310px\" frameborder=\"0\"><\/iframe><\/p>\n<p>Voici comment le construire :<\/p>\n<h3>Voir<\/h3>\n<ul>\n<li>Cliquez sur \u00ab\u00a0Image\u00a0\u00bb (en cliquant sur cet outil, vous afficherez un explorateur de fichiers pour s\u00e9lectionner un fichier image). Apr\u00e8s avoir s\u00e9lectionn\u00e9 un fichier, vous pouvez choisir l&rsquo;endroit o\u00f9 le placer dans le canevas ; vous pouvez \u00e9galement faire glisser le widget \u00ab\u00a0Image\u00a0\u00bb de la biblioth\u00e8que \u00ab\u00a0Basic widget\u00a0\u00bb vers le canevas et double-cliquer dessus pour charger votre image. <\/li>\n<li>S\u00e9lectionnez \u00ab\u00a0Hotspot\u00a0\u00bb et placez-le au-dessus de votre image ; vous pouvez \u00e9galement faire glisser le widget \u00ab\u00a0Hotspot\u00a0\u00bb depuis l&rsquo;onglet de navigation sous la biblioth\u00e8que \u00ab\u00a0Basic widget\u00a0\u00bb ; ajustez la position pour couvrir la zone o\u00f9 attacher l&rsquo;action.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-1.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/li>\n<li><span data-preserver-spaces=\"true\">Faites glisser le \u00ab\u00a0Texte\u00a0\u00bb, placez-le sur le canevas et allez dans la palette Propri\u00e9t\u00e9s pour le cacher en cliquant sur l&rsquo;ic\u00f4ne \u00ab\u00a0Cach\u00e9 dans la simulation\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-2.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/span><\/li>\n<\/ul>\n<h3>Ev\u00e9nements<\/h3>\n<p>S\u00e9lectionnez le \u00ab\u00a0Hotspot\u00a0\u00bb, allez dans la palette \u00c9v\u00e9nements, cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-3.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/p>\n<ol>\n<li>Dans la bo\u00eete de dialogue, cliquez sur le menu d\u00e9roulant \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Mouse Over\u00a0\u00bb.<\/li>\n<li>Dans \u00ab\u00a0Choisir l&rsquo;action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Afficher l&rsquo;\u00e9l\u00e9ment cach\u00e9\u00a0\u00bb et s\u00e9lectionnez le \u00ab\u00a0Texte\u00a0\u00bb. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-4.png\" alt=\"ic\u00f4ne de l'\u0153il3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Simulez votre prototype.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 prototyper une image interactive. Vous d\u00e9finirez une r\u00e9gion sur une image afin qu&rsquo;un texte apparaisse lorsque vous passez la souris&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8435,8426],"tags":[],"class_list":["post-124678","post","type-post","status-publish","format-standard","hentry","category-interactions-avancees","category-comment-faire"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124678"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124678"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124678\/revisions"}],"predecessor-version":[{"id":126173,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124678\/revisions\/126173"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}