{"id":3997,"date":"2012-08-20T08:49:02","date_gmt":"2012-08-20T08:49:02","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3997"},"modified":"2012-09-19T20:15:43","modified_gmt":"2012-09-19T20:15:43","slug":"mapas-de-imagenes","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/","title":{"rendered":"Mapas de im\u00e1genes"},"content":{"rendered":"<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-4018\" title=\"map\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map-150x150.png\" alt=\"\" width=\"150\" height=\"150\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map-150x150.png 150w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map-80x80.png 80w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map-180x180.png 180w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a>En este art\u00edculo vamos a ver como crear un <strong>mapa de una imagen<\/strong> con HTML y su etiqueta &lt;map&gt;.<\/p>\n<p>La idea es tener un imagen en la cual vamos a tener partes o secciones que queremos identificar. Representar un mapa geogr\u00e1fico ser\u00eda un ejemplo clar\u00edsimo, aunque se podr\u00eda emplear para cualquier tipo de imagen.<\/p>\n<p>Todo esto va a quedar m\u00e1s claro si lo explicamos mediante un ejemplo.<\/p>\n<p>Vamos a tener una imagen que representa las prov\u00edncias de Espa\u00f1a. Queremos que al hacer click en cada prov\u00edncia se haga una acci\u00f3n predeterminada a esa prov\u00edncia.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/spain.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4017\" title=\"spain\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/spain.png\" alt=\"\" width=\"183\" height=\"173\" \/><\/a>De esta forma, podr\u00edamos construir por ejemplo un directorio de hoteles. Los usuarios o clientes al hacer click en una de las prov\u00edncias visualizar\u00e1n un listado de hoteles disponibles en esa prov\u00edncia.<\/p>\n<p>Para disponer de esta funcionalidad lo primero que tendremos que hacer es declarar o definir la imagen a mapear como por ejemplo:<\/p>\n<pre>&lt;img border=\"0\" width=\"168\" height=\"149\" usemap=\"#Map\" src=\"mapa.png\"&gt;<\/pre>\n<p>Es importante indicar en la etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap=\u00bb#nombre del mapa\u00bb, para asociar.<\/p>\n<p>Seguidamente definir el mapa sobre esta imagen con todas sus areas:<\/p>\n<pre>&lt;map id=\"Map\" name=\"Map\"&gt;\r\n   &lt;area alt=\"C\u00e1diz\" href=\"index.php?do=recherche&amp;amp;seek=C\u00e1diz\" coords=\"32,112,46,111,50,120,42,128\" shape=\"poly\"&gt;\r\n   ...\r\n&lt;\/map&gt;<\/pre>\n<p>Las etiquetas &lt;map&gt;&#8230;..&lt;\/map&gt; identifican que vamos a crear un mapa de im\u00e1genes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.<\/p>\n<p>Las etiquetas &lt;area&gt; definen las \u00e1reas que vamos a poder activar en esa imagen. A esta etiqueta le acompa\u00f1an los siguientes atributos:<\/p>\n<ul>\n<li><strong>shape<\/strong>: Establecemos el tipo de \u00e1rea a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).<\/li>\n<li><strong>Coords<\/strong>: Indicamos los pares de coordenadas de cada punto del \u00e1rea a activar. Estas coordenadas las podemos averiguar utilizando un programa de edici\u00f3n de im\u00e1genes. En las \u00e1reas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los v\u00e9rtices del \u00e1rea. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.<\/li>\n<li><strong>Href<\/strong>: Como ya sabe, indica la direcci\u00f3n, entre comillas, de la p\u00e1gina web a la que accede si pinchamos en un \u00e1rea determinada.<\/li>\n<\/ul>\n<p>Lo que te podr\u00eda resultar m\u00e1s dif\u00edcil de generar a simple vista son las coordenadas del mapa, es decir, definir que area ser\u00e1 la que deseemos. Seguramente habr\u00e1 muchas herramientes para generar estas coordenadas sobre una imagen pero con Dreamweaver lo podemos generar de una forma f\u00e1cil. Simplemente tenemos que ir a modo dise\u00f1o, seleccionar la imagen y acceder a propiedades, all\u00ed ver\u00e1s un apartado que pone mapa con diferentes par\u00e1metros a rellenar. Lo importante es seleccionar con el rat\u00f3n el area que deseemos, poner el link, alt y la id del mapa.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/html\/map\/spain\/\" target=\"_blank\">Ver ejemplo de Espa\u00f1a<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/html\/map\/planets\/\" target=\"_blank\">Ver ejemplo con planetas<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo vamos a ver como crear un mapa de una imagen con HTML y su etiqueta &lt;map&gt;. La idea es tener un imagen en la cual vamos a tener partes o secciones que queremos identificar. Representar un mapa geogr\u00e1fico ser\u00eda un ejemplo clar\u00edsimo, aunque se podr\u00eda emplear para cualquier tipo de imagen. Todo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4018,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[110,85],"class_list":["post-3997","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-imagenes","tag-mapas"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mapas de im\u00e1genes - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mapas de im\u00e1genes - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a ver como crear un mapa de una imagen con HTML y su etiqueta &lt;map&gt;. La idea es tener un imagen en la cual vamos a tener partes o secciones que queremos identificar. Representar un mapa geogr\u00e1fico ser\u00eda un ejemplo clar\u00edsimo, aunque se podr\u00eda emplear para cualquier tipo de imagen. Todo [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-20T08:49:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-09-19T20:15:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png\" \/>\n\t<meta property=\"og:image:width\" content=\"275\" \/>\n\t<meta property=\"og:image:height\" content=\"390\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/\",\"name\":\"Mapas de im\u00e1genes - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png\",\"datePublished\":\"2012-08-20T08:49:02+00:00\",\"dateModified\":\"2012-09-19T20:15:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png\",\"width\":275,\"height\":390},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mapas de im\u00e1genes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mapas de im\u00e1genes - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Mapas de im\u00e1genes - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a ver como crear un mapa de una imagen con HTML y su etiqueta &lt;map&gt;. La idea es tener un imagen en la cual vamos a tener partes o secciones que queremos identificar. Representar un mapa geogr\u00e1fico ser\u00eda un ejemplo clar\u00edsimo, aunque se podr\u00eda emplear para cualquier tipo de imagen. Todo [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-08-20T08:49:02+00:00","article_modified_time":"2012-09-19T20:15:43+00:00","og_image":[{"width":275,"height":390,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/","url":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/","name":"Mapas de im\u00e1genes - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png","datePublished":"2012-08-20T08:49:02+00:00","dateModified":"2012-09-19T20:15:43+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/map.png","width":275,"height":390},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/mapas-de-imagenes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mapas de im\u00e1genes"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3997"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3997\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/4018"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}