{"id":235,"date":"2017-05-22T00:11:10","date_gmt":"2017-05-21T22:11:10","guid":{"rendered":"http:\/\/www.raphaelle-lecot.fr\/blog\/?p=235"},"modified":"2025-03-26T11:58:47","modified_gmt":"2025-03-26T10:58:47","slug":"zones-reactives-image-html","status":"publish","type":"post","link":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/","title":{"rendered":"Cr\u00e9ez des zones r\u00e9actives sur une image en HTML"},"content":{"rendered":"\n[et_pb_section fb_built=\u00a0\u00bb1&Prime; admin_label=\u00a0\u00bbsection\u00a0\u00bb _builder_version=\u00a0\u00bb3.22&Prime;][et_pb_row admin_label=\u00a0\u00bbrow\u00a0\u00bb _builder_version=\u00a0\u00bb3.25&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb3.25&Prime; custom_padding=\u00a0\u00bb|||\u00a0\u00bb custom_padding__hover=\u00a0\u00bb|||\u00a0\u00bb][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime;]<p style=\"text-align: justify;\">Chaque image ins\u00e9r\u00e9e dans une page HTML peut \u00eatre rendue cliquable, c&rsquo;est \u00e0 dire qu&rsquo;elles deviennent un lien vers une page web. La limitation de cette technique r\u00e9side dans le fait que l&rsquo;on ne peut attribuer qu\u2019une seule adresse URL par image, or il est parfois n\u00e9cessaire qu&rsquo;une seule et m\u00eame image soit le support de plusieurs liens diff\u00e9rents.<\/p>\n<p style=\"text-align: justify;\">La balise &lt;map&gt; sert \u00e0 d\u00e9finir des zones de liens appel\u00e9es <strong>zones r\u00e9actives <\/strong>sur une image. Son utilisation est coupl\u00e9e \u00e0 la balise &lt;img \/&gt;.<\/p>\n\n<h3>Insertion de l&rsquo;image<\/h3>\n<p style=\"text-align: justify;\">On insert tout d&rsquo;abord l&rsquo;image dans la page HTML, avec tous les attributs n\u00e9cessaires :<\/p>\n\n<code>&lt;img src=\"image.jpg\" alt=\"commentaire\" usemap=\"#nom-de-la-carte\"    width=\"1000\" height=\"400\" name=\"nom-de-l-image\" \/&gt;<\/code>\n<h3>Cr\u00e9ation de la carte<\/h3>\n<p style=\"text-align: justify;\">Il faut ensuite <strong>cr\u00e9er la carte <\/strong>qui va contenir les diff\u00e9rentes zones r\u00e9actives. Cette carte est cr\u00e9\u00e9e \u00e0 l&rsquo;aide de la balise &lt;map&gt;. Cette balise poss\u00e8de l&rsquo;attribut <em>name=nom-de-la-carte<\/em>, o\u00f9 <em>nom-de-la-carte<\/em> correspond au <em>usemap<\/em> de l&rsquo;image.\nLe conteneur &lt;map&gt; contient autant de balises &lt;area \/&gt; qu&rsquo;il y a de zones r\u00e9actives.<\/p>\nSyntaxe :\n<code>&lt;map name=\"nom-de-la-carte\"&gt;\n&lt;area [...] \/&gt;\n&lt;area [...] \/&gt;\n&lt;area [...] \/&gt;\n&lt;\/map&gt;<\/code>\n<h3>Zones r\u00e9actives<\/h3>\n<p style=\"text-align: justify;\">A chaque zone r\u00e9active est associ\u00e9e une balise &lt;area \/&gt; dont les attributs sont:<\/p>\n\n<ul>\n\t<li><strong>name <\/strong>: le nom de la zone,<\/li>\n\t<li><strong>shape <\/strong>: la forme g\u00e9om\u00e9trique (cercle, rectangle ou polygone),<\/li>\n\t<li><strong>coords <\/strong>: les coordonn\u00e9es de la zone, s\u00e9par\u00e9es par des virgules,<\/li>\n\t<li><strong>href <\/strong>: lien hypertexte de la zone,<\/li>\n\t<li><strong>alt <\/strong>: le texte alternatif.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Le plus fastidieux est alors de <strong>d\u00e9terminer les coordonn\u00e9es <\/strong>de chaque zone.<\/p>\n\n<h4><u>D\u00e9termination des coordonn\u00e9es<\/u><\/h4>\n<p style=\"text-align: justify;\">Gardez en t\u00eate que <em>x<\/em> correspond aux coordonn\u00e9es horizontales (<em>abscisses<\/em>) et <em>y<\/em> aux coordonn\u00e9es verticales (<em>ordonn\u00e9es<\/em>).<\/p>\n<p style=\"text-align: justify;\">Sous Photoshop, vous trouverez les coordonn\u00e9es en appuyant sur F8 pour afficher le panneau des informations. Vous n&rsquo;avez plus qu&rsquo;\u00e0 passer le curseur \u00e0 l&rsquo;endroit voulu pour lire les coordonn\u00e9es du point voulu.<\/p>\n&nbsp;[\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/photoshop-ccordonnees.png\u00a0\u00bb show_in_lightbox=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; module_alignment=\u00a0\u00bbcenter\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; align=\u00a0\u00bbcenter\u00a0\u00bb max_width=\u00a0\u00bb600px\u00a0\u00bb][\/et_pb_image][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime;]<p style=\"text-align: justify;\">\n<h4><u>Zone rectangulaire<\/u><\/h4>\n<p style=\"text-align: justify;\">Une <strong>zone rectangulaire <\/strong>est d\u00e9finie par la balise <code>&lt;area shape=\"rect\" \/&gt;<\/code>. L&rsquo;attribut <em>coords<\/em> prend pour valeur les coordonn\u00e9es des <strong>coins sup\u00e9rieur gauche <\/strong>et <strong>inf\u00e9rieur droit<\/strong>, s\u00e9par\u00e9es par des virgules.<\/p>[\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/zone-rect.png\u00a0\u00bb show_in_lightbox=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; module_alignment=\u00a0\u00bbcenter\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; max_width=\u00a0\u00bb600px\u00a0\u00bb][\/et_pb_image][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime;]<code>&lt;area shape=\"rect\" coords=\"x1,y1,x2,y2\" href=\"rectangle.html\" \/&gt;<\/code>\n<h4><u><\/u><\/h4>\n<h4><u>Zone circulaire<\/u><\/h4>\n<p style=\"text-align: justify;\">Une <strong>zone circulaire <\/strong>est d\u00e9finie par la balise <code>&lt;area shape=\"circle\" \/&gt;<\/code>. L&rsquo;attribut <em>coords<\/em> prend pour valeur la liste des coordonn\u00e9es du <strong>centre du cercle <\/strong>et son <strong>rayon<\/strong>.<\/p>[\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/zone-circle.png\u00a0\u00bb show_in_lightbox=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; module_alignment=\u00a0\u00bbcenter\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; max_width=\u00a0\u00bb600px\u00a0\u00bb][\/et_pb_image][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime;]<code>&lt;area shape=\"circle\" coords=\"x1,y1,r\" href=\"cercle.html\" \/&gt;<\/code>\n<h4><u><\/u><\/h4>\n<h4><u><\/u><\/h4>\n<h4><u>Zone polygonale<\/u><\/h4>\n<p style=\"text-align: justify;\">Une <strong>zone polygonale <\/strong>est d\u00e9finie par la balise <code>&lt;area shape=\"poly\" \/&gt;<\/code>. L&rsquo;attribut <em>coords<\/em> prend pour valeur la liste des coordonn\u00e9es de chacun des points (avec un \u00ab\u00a0retour\u00a0\u00bb sur le point de d\u00e9part).<\/p>[\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/zone-poly.png\u00a0\u00bb show_in_lightbox=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; module_alignment=\u00a0\u00bbcenter\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; max_width=\u00a0\u00bb600px\u00a0\u00bb][\/et_pb_image][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime;]<code>&lt;area shape=\"poly\" coords=\"x1,y1,x2,y2,x3,y3,x4,y4,x1,y1\" href=\"polygone.html\" \/&gt;<\/code>\n<h3><\/h3>\n<h3>Exemple<\/h3>[\/et_pb_text][et_pb_image src=\u00a0\u00bbhttps:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/zones-reactives.png\u00a0\u00bb show_in_lightbox=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; module_alignment=\u00a0\u00bbcenter\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; max_width=\u00a0\u00bb600px\u00a0\u00bb][\/et_pb_image][et_pb_text admin_label=\u00a0\u00bbText\u00a0\u00bb _builder_version=\u00a0\u00bb4.0.7&Prime; background_size=\u00a0\u00bbinitial\u00a0\u00bb background_position=\u00a0\u00bbtop_left\u00a0\u00bb background_repeat=\u00a0\u00bbrepeat\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime;]<code>&lt;img src=\"2017\/05\/zones-reactives.png\" alt=\"\" usemap=\"#zones-reactives\"     width=\"500\" height=\"200\" name=\"image-zones-reactives\" \/&gt;\n&lt;map name=\"zones-reactives\"&gt;\n     &lt;area  shape=\"rect\" coords=\"20,70,216,157\" href=\"bleu.png\" \/&gt;\n     &lt;area  shape=\"circle\" coords=\"314,113,70\" href=\"rouge.png\" \/&gt;\n     &lt;area  shape=\"poly\"     coords=\"405,84,488,84,488,56,573,112,488,167,488,141,405,141,405,84\"\n       href=\"vert.png\" \/&gt;\n&lt;\/map&gt;<\/code>\n<p>A vous de jouer !<\/p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n","protected":false},"excerpt":{"rendered":"<p>Chaque image ins\u00e9r\u00e9e dans une page HTML peut \u00eatre rendue cliquable, c&rsquo;est \u00e0 dire qu&rsquo;elles deviennent un lien vers une page web. La limitation de cette technique r\u00e9side dans le fait que l&rsquo;on ne peut attribuer qu\u2019une seule adresse URL par image, or il est parfois n\u00e9cessaire qu&rsquo;une seule et m\u00eame image soit le support [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":820,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<p style=\"text-align: justify;\">Chaque image ins\u00e9r\u00e9e dans une page HTML peut \u00eatre rendue cliquable, c'est \u00e0 dire qu'elles deviennent un lien vers une page web. La limitation de cette technique r\u00e9side dans le fait que l'on ne peut attribuer qu\u2019une seule adresse URL par image, or il est parfois n\u00e9cessaire qu'une seule et m\u00eame image soit le support de plusieurs liens diff\u00e9rents.<\/p>\n<p style=\"text-align: justify;\">La balise &lt;map&gt; sert \u00e0 d\u00e9finir des zones de liens appel\u00e9es <strong>zones r\u00e9actives <\/strong>sur une image. Son utilisation est coupl\u00e9e \u00e0 la balise &lt;img \/&gt;.<\/p>\n<h3>Insertion de l'image<\/h3>\n<p style=\"text-align: justify;\">On insert tout d'abord l'image dans la page HTML, avec tous les attributs n\u00e9cessaires :<\/p>\n<pre>&lt;img src=\"image.jpg\" alt=\"commentaire\" usemap=\"#nom-de-la-carte\"\n   width=\"1000\" height=\"400\" name=\"nom-de-l-image\" \/&gt;<\/pre>\n<h3>Cr\u00e9ation de la carte<\/h3>\n<p style=\"text-align: justify;\">Il faut ensuite <strong>cr\u00e9er la carte <\/strong>qui va contenir les diff\u00e9rentes zones r\u00e9actives. Cette carte est cr\u00e9\u00e9e \u00e0 l'aide de la balise &lt;map&gt;. Cette balise poss\u00e8de l'attribut <em>name=nom-de-la-carte<\/em>, o\u00f9 <em>nom-de-la-carte<\/em> correspond au <em>usemap<\/em> de l'image.\nLe conteneur &lt;map&gt; contient autant de balises &lt;area \/&gt; qu'il y a de zones r\u00e9actives.<\/p>\nSyntaxe :\n<pre>&lt;map name=\"nom-de-la-carte\"&gt;\n     &lt;area [...] \/&gt;\n     &lt;area [...] \/&gt;\n     &lt;area [...] \/&gt;\n&lt;\/map&gt;<\/pre>\n<h3>Zones r\u00e9actives<\/h3>\n<p style=\"text-align: justify;\">A chaque zone r\u00e9active est associ\u00e9e une balise &lt;area \/&gt; dont les attributs sont:<\/p>\n<ul>\n \t<li><strong>name <\/strong>: le nom de la zone,<\/li>\n \t<li><strong>shape <\/strong>: la forme g\u00e9om\u00e9trique (cercle, rectangle ou polygone),<\/li>\n \t<li><strong>coords <\/strong>: les coordonn\u00e9es de la zone, s\u00e9par\u00e9es par des virgules,<\/li>\n \t<li><strong>href <\/strong>: lien hypertexte de la zone,<\/li>\n \t<li><strong>alt <\/strong>: le texte alternatif.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Le plus fastidieux est alors de <strong>d\u00e9terminer les coordonn\u00e9es <\/strong>de chaque zone.<\/p>\n<h4><u>D\u00e9termination des coordonn\u00e9es<\/u><\/h4>\n<p style=\"text-align: justify;\">Gardez en t\u00eate que <em>x<\/em> correspond aux coordonn\u00e9es horizontales (<em>abscisses<\/em>) et <em>y<\/em> aux coordonn\u00e9es verticales (<em>ordonn\u00e9es<\/em>).<\/p>\n<p style=\"text-align: justify;\">Sous Photoshop, vous trouverez les coordonn\u00e9es en appuyant sur F8 pour afficher le panneau des informations. Vous n'avez plus qu'\u00e0 passer le curseur \u00e0 l'endroit voulu pour lire les coordonn\u00e9es du point voulu.<\/p>\n<a href=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/photoshop-ccordonnees.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img class=\"aligncenter wp-image-261 size-medium\" src=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/photoshop-ccordonnees-300x168.png\" alt=\"\" width=\"300\" height=\"168\" \/><\/a>\n<h4><u>Zone rectangulaire<\/u><\/h4>\n<p style=\"text-align: justify;\">Une <strong>zone rectangulaire <\/strong>est d\u00e9finie par la balise <code>&lt;area shape=\"rect\" \/&gt;<\/code>. L'attribut <em>coords<\/em> prend pour valeur les coordonn\u00e9es des <strong>coins sup\u00e9rieur gauche <\/strong>et <strong>inf\u00e9rieur droit<\/strong>, s\u00e9par\u00e9es par des virgules.<\/p>\n<img class=\"aligncenter size-medium wp-image-253\" src=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/zone-rect-300x191.png\" alt=\"\" width=\"300\" height=\"191\" \/>\n<pre>&lt;area shape=\"rect\" coords=\"x1,y1,x2,y2\" href=\"rectangle.html\" \/&gt;<\/pre>\n<h4><u>Zone circulaire<\/u><\/h4>\n<p style=\"text-align: justify;\">Une <strong>zone circulaire <\/strong>est d\u00e9finie par la balise <code>&lt;area shape=\"circle\" \/&gt;<\/code>. L'attribut <em>coords<\/em> prend pour valeur la liste des coordonn\u00e9es du <strong>centre du cercle <\/strong>et son <strong>rayon<\/strong>.<\/p>\n<img class=\"aligncenter size-medium wp-image-254\" src=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/zone-circle-300x191.png\" alt=\"\" width=\"300\" height=\"191\" \/>\n<pre>&lt;area shape=\"circle\" coords=\"x1,y1,r\" href=\"cercle.html\" \/&gt;<\/pre>\n<h4><u>Zone polygonale<\/u><\/h4>\n<p style=\"text-align: justify;\">Une <strong>zone polygonale <\/strong>est d\u00e9finie par la balise <code>&lt;area shape=\"poly\" \/&gt;<\/code>. L'attribut <em>coords<\/em> prend pour valeur la liste des coordonn\u00e9es de chacun des points (avec un \"retour\" sur le point de d\u00e9part).<\/p>\n<img class=\"aligncenter size-medium wp-image-255\" src=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/zone-poly-300x191.png\" alt=\"\" width=\"300\" height=\"191\" \/>\n<pre>&lt;area shape=\"poly\" coords=\"x1,y1,x2,y2,x3,y3,x4,y4,x1,y1\"\n     href=\"polygone.html\" \/&gt;<\/pre>\n<h3>Exemple<\/h3>\n<img class=\"aligncenter size-full wp-image-293\" src=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/zones-reactives.png\" alt=\"\" usemap=\"#zones-reactives\" width=\"600\" height=\"240\" \/>\n<map name=\"zones-reactives\"> <area coords=\"20,70,216,157\" shape=\"rect\" href=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/bleu.png\" target=\"_blank\" \/> <area coords=\"314,113,70\" shape=\"circle\" href=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/rouge.png\" target=\"_blank\" \/> <area coords=\"405,84,488,84,488,56,573,112,488,167,488,141,405,141,405,84\" shape=\"poly\" href=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2017\/05\/vert.png\" target=\"_blank\" \/> <\/map>\n<pre>&lt;img src=\"2017\/05\/zones-reactives.png\" alt=\"\" usemap=\"#zones-reactives\"\n    width=\"500\" height=\"200\" name=\"image-zones-reactives\" \/&gt;\n&lt;map name=\"zones-reactives\"&gt;\n     &lt;area  shape=\"rect\" coords=\"20,70,216,157\" href=\"bleu.png\" \/&gt;\n     &lt;area  shape=\"circle\" coords=\"314,113,70\" href=\"rouge.png\" \/&gt;\n     &lt;area  shape=\"poly\"\n       coords=\"405,84,488,84,488,56,573,112,488,167,488,141,405,141,405,84\"\n       href=\"vert.png\" \/&gt;\n&lt;\/map&gt;<\/pre>\nA vous de jouer !","_et_gb_content_width":"","footnotes":""},"categories":[2,6],"tags":[23,25,27],"class_list":["post-235","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-tous","tag-html","tag-images","tag-liens"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cr\u00e9er des zones r\u00e9actives sur une image HTML : Tutoriel complet<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 cr\u00e9er des zones r\u00e9actives (map) sur une image HTML pour rendre vos images interactives et plus engageantes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cr\u00e9er des zones r\u00e9actives sur une image HTML : Tutoriel complet\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 cr\u00e9er des zones r\u00e9actives (map) sur une image HTML pour rendre vos images interactives et plus engageantes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Astuces, Notes et Techniques du Web\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-21T22:11:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-26T10:58:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Image-map-1-1024x471.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rapha\u00eblle L\u00e9cot\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rapha\u00eblle L\u00e9cot\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/\"},\"author\":{\"name\":\"Rapha\u00eblle L\u00e9cot\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#\\\/schema\\\/person\\\/cf1702a56eb8ac0ef5c22a850684c9c9\"},\"headline\":\"Cr\u00e9ez des zones r\u00e9actives sur une image en HTML\",\"datePublished\":\"2017-05-21T22:11:10+00:00\",\"dateModified\":\"2025-03-26T10:58:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/\"},\"wordCount\":779,\"image\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Image-map-1-1024x471.jpg\",\"keywords\":[\"html\",\"images\",\"liens\"],\"articleSection\":[\"Code\",\"Tous\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/\",\"url\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/\",\"name\":\"Cr\u00e9er des zones r\u00e9actives sur une image HTML : Tutoriel complet\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Image-map-1-1024x471.jpg\",\"datePublished\":\"2017-05-21T22:11:10+00:00\",\"dateModified\":\"2025-03-26T10:58:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#\\\/schema\\\/person\\\/cf1702a56eb8ac0ef5c22a850684c9c9\"},\"description\":\"Apprenez \u00e0 cr\u00e9er des zones r\u00e9actives (map) sur une image HTML pour rendre vos images interactives et plus engageantes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Image-map-1-1024x471.jpg\",\"contentUrl\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/Image-map-1-1024x471.jpg\",\"width\":800,\"height\":410,\"caption\":\"Images r\u00e9actives en CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/zones-reactives-image-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cr\u00e9ez des zones r\u00e9actives sur une image en HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/\",\"name\":\"Astuces, Notes et Techniques du Web\",\"description\":\"par Rapha\u00eblle L\u00e9cot\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.raphaelle-lecot.fr\\\/blog\\\/#\\\/schema\\\/person\\\/cf1702a56eb8ac0ef5c22a850684c9c9\",\"name\":\"Rapha\u00eblle L\u00e9cot\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cr\u00e9er des zones r\u00e9actives sur une image HTML : Tutoriel complet","description":"Apprenez \u00e0 cr\u00e9er des zones r\u00e9actives (map) sur une image HTML pour rendre vos images interactives et plus engageantes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/","og_locale":"fr_FR","og_type":"article","og_title":"Cr\u00e9er des zones r\u00e9actives sur une image HTML : Tutoriel complet","og_description":"Apprenez \u00e0 cr\u00e9er des zones r\u00e9actives (map) sur une image HTML pour rendre vos images interactives et plus engageantes.","og_url":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/","og_site_name":"Astuces, Notes et Techniques du Web","article_published_time":"2017-05-21T22:11:10+00:00","article_modified_time":"2025-03-26T10:58:47+00:00","og_image":[{"width":800,"height":410,"url":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Image-map-1-1024x471.jpg","type":"image\/jpeg"}],"author":"Rapha\u00eblle L\u00e9cot","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Rapha\u00eblle L\u00e9cot","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/#article","isPartOf":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/"},"author":{"name":"Rapha\u00eblle L\u00e9cot","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#\/schema\/person\/cf1702a56eb8ac0ef5c22a850684c9c9"},"headline":"Cr\u00e9ez des zones r\u00e9actives sur une image en HTML","datePublished":"2017-05-21T22:11:10+00:00","dateModified":"2025-03-26T10:58:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/"},"wordCount":779,"image":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Image-map-1-1024x471.jpg","keywords":["html","images","liens"],"articleSection":["Code","Tous"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/","url":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/","name":"Cr\u00e9er des zones r\u00e9actives sur une image HTML : Tutoriel complet","isPartOf":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/#primaryimage"},"image":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Image-map-1-1024x471.jpg","datePublished":"2017-05-21T22:11:10+00:00","dateModified":"2025-03-26T10:58:47+00:00","author":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#\/schema\/person\/cf1702a56eb8ac0ef5c22a850684c9c9"},"description":"Apprenez \u00e0 cr\u00e9er des zones r\u00e9actives (map) sur une image HTML pour rendre vos images interactives et plus engageantes.","breadcrumb":{"@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/#primaryimage","url":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Image-map-1-1024x471.jpg","contentUrl":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-content\/uploads\/2019\/11\/Image-map-1-1024x471.jpg","width":800,"height":410,"caption":"Images r\u00e9actives en CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/zones-reactives-image-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/www.raphaelle-lecot.fr\/blog\/"},{"@type":"ListItem","position":2,"name":"Cr\u00e9ez des zones r\u00e9actives sur une image en HTML"}]},{"@type":"WebSite","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#website","url":"https:\/\/www.raphaelle-lecot.fr\/blog\/","name":"Astuces, Notes et Techniques du Web","description":"par Rapha\u00eblle L\u00e9cot","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.raphaelle-lecot.fr\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.raphaelle-lecot.fr\/blog\/#\/schema\/person\/cf1702a56eb8ac0ef5c22a850684c9c9","name":"Rapha\u00eblle L\u00e9cot"}]}},"_links":{"self":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/posts\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":0,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/media\/820"}],"wp:attachment":[{"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.raphaelle-lecot.fr\/blog\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}