{"id":277,"date":"2015-11-21T18:11:21","date_gmt":"2015-11-21T22:41:21","guid":{"rendered":"http:\/\/gregorgonzalez.com.ve\/blog\/?p=277"},"modified":"2023-06-23T22:03:57","modified_gmt":"2023-06-24T02:33:57","slug":"generador-de-coordenadas-de-imagen-imagemap","status":"publish","type":"post","link":"http:\/\/gregorgonzalez.com.ve\/blog\/generador-de-coordenadas-de-imagen-imagemap\/","title":{"rendered":"Generador de coordenadas de imagen \u2013 Imagemap"},"content":{"rendered":"<p>Html tiene un c\u00f3digo especial para especificar que secciones de una imagen queremos tomar como un \u201c\u00e1rea\u201d y dicho tag contenga un enlace determinado. Nunca lo hab\u00eda utilizado, sab\u00eda que exist\u00eda pero fue hasta hoy que lo necesitaba para un proyecto.<\/p>\n<p>Se trata de tomar una imagen, determinar regiones o secciones a trav\u00e9s de coordenadas, puntos X y puntos Y para formar un \u00e1rea. Las \u00e1reas pueden ser una simple l\u00ednea, un c\u00edrculo o poly-l\u00ednea generando cualquier figura. Esta t\u00e9cnica he visto que se usa para realizar alg\u00fan men\u00fa especifico o tener un mapa real para dividir por pa\u00eds, estados o cualquiera que se nos ocurra, aunque tiene muchas limitaciones y si quieres algo en espec\u00edfico, tendr\u00e1s que generar arduamente el c\u00f3digo para manipularlo, las \u00e1reas se limitan a hacer la divisi\u00f3n y a aceptar un enlace, cualquier otra funcionalidad deber\u00e1s fabricarla t\u00fa mismo.<\/p>\n<p>La p\u00e1gina es <a href=\"http:\/\/imagemap-generator.dariodomi.de\/\" target=\"_blank\" rel=\"noopener\">http:\/\/imagemap-generator.dariodomi.de\/<\/a> (alternativa <a href=\"https:\/\/www.image-map.net\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.image-map.net\/<\/a>) solo debemos subir una imagen, crear las secciones o divisiones, bastante \u00fatil realizarlo de esta manera, al mismo tiempo te genera el c\u00f3digo HTML con las coordenadas, solo queda copiar y pegar y listo.<\/p>\n<p><a href=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-278 aligncenter\" src=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator.png\" alt=\"imagemap-generator\" width=\"546\" height=\"629\" srcset=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator.png 546w, http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator-260x300.png 260w\" sizes=\"(max-width: 546px) 100vw, 546px\" \/><\/a><\/p>\n<p>En esta secci\u00f3n trabajamos con puntos, as\u00ed que podemos crear las \u00e1reas como las necesitemos y luego colocarle un enlace a dicha \u00e1rea, en este ejemplo muestro como al teclado le estamos creando una secci\u00f3n:<\/p>\n<p><a href=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-279 aligncenter\" src=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator2.png\" alt=\"imagemap-generator2\" width=\"804\" height=\"595\" srcset=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator2.png 804w, http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator2-300x222.png 300w\" sizes=\"(max-width: 804px) 100vw, 804px\" \/><\/a><\/p>\n<p>Cuando creamos nuestro archivo web y agregamos la imagen en conjunto con el mapa de coordenadas, podremos hacer clic sobre \u00e9l. Nota: las \u00e1reas realizadas no generan ning\u00fan efecto hover ni se les puede agregar, ya que no se trata de un elemento com\u00fan de html.<\/p>\n<p><a href=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-280 aligncenter\" src=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator3.png\" alt=\"imagemap-generator3\" width=\"541\" height=\"241\" srcset=\"http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator3.png 541w, http:\/\/gregorgonzalez.com.ve\/blog\/wp-content\/uploads\/imagemap-generator3-300x134.png 300w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Html tiene un c\u00f3digo especial para especificar que secciones de una imagen queremos tomar como un \u201c\u00e1rea\u201d y dicho tag contenga un enlace determinado. Nunca lo hab\u00eda utilizado, sab\u00eda que exist\u00eda pero fue hasta hoy que lo necesitaba para un proyecto. Se trata de tomar una imagen, determinar regiones o secciones a trav\u00e9s de coordenadas, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[6],"tags":[116,113,30,115,114],"_links":{"self":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/277"}],"collection":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/comments?post=277"}],"version-history":[{"count":2,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/277\/revisions"}],"predecessor-version":[{"id":940,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/posts\/277\/revisions\/940"}],"wp:attachment":[{"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/media?parent=277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/categories?post=277"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gregorgonzalez.com.ve\/blog\/wp-json\/wp\/v2\/tags?post=277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}