{"id":137,"date":"2024-05-21T08:54:29","date_gmt":"2024-05-21T06:54:29","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=137"},"modified":"2024-05-21T08:54:30","modified_gmt":"2024-05-21T06:54:30","slug":"19-mapas-de-imagen","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/19-mapas-de-imagen\/","title":{"rendered":"19. Mapas de imagen"},"content":{"rendered":"\n

Con los mapas de im\u00e1genes<\/strong> HTML, puedes crear \u00e1reas en las que se puede hacer clic en una imagen. La etiqueta HTML <map><\/em><\/strong> define un mapa de imagen<\/strong>. Un mapa de imagen<\/strong> es una imagen con \u00e1reas<\/strong> en las que se puedes hacer clic. Las \u00e1reas<\/strong> se definen con una o m\u00e1s etiquetas <area><\/em><\/strong>.<\/p>\n\n\n\n\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<img src=\"workplace.jpg\" alt=\"Workplace\" usemap=\"#workmap\">\n\n<map name=\"workmap\">\n  <area shape=\"rect\" coords=\"34,44,270,350\" alt=\"Computer\" href=\"computer.htm\">\n  <area shape=\"rect\" coords=\"290,172,333,250\" alt=\"Phone\" href=\"phone.htm\">\n  <area shape=\"circle\" coords=\"337,300,44\" alt=\"Coffee\" href=\"coffee.htm\">\n<\/map><\/pre>\n\n\n\n
Como funciona<\/h2>\n\n\n\n
La idea detr\u00e1s de un mapa de imagen es que deber\u00edas poder realizar diferentes acciones seg\u00fan el lugar de la imagen en el que hagas clic. Para crear un mapa de imagen, necesitas una imagen y alg\u00fan c\u00f3digo HTML<\/strong> que describa las \u00e1reas en las que se puede hacer clic.<\/p>\n\n\n\n
La imagen<\/h2>\n\n\n\n
La imagen se inserta usando la etiqueta <img><\/em><\/strong>. La \u00fanica diferencia con otras im\u00e1genes es que debes agregar un atributo usemap<\/em><\/strong>:<\/p>\n\n\n\n
<img src=\"workplace.jpg\" alt=\"Workplace\" usemap=\"#workmap\"><\/pre>\n\n\n\n
El valor de usemap<\/em><\/strong> comienza con una etiqueta hash # seguida del nombre del mapa de imagen y se usa para crear una relaci\u00f3n entre la imagen y el mapa de imagen.<\/p>\n\n\n\n
Crear mapa de imagen<\/h2>\n\n\n\n
Luego, agrega un elemento <map><\/em><\/strong>. El elemento <map><\/em><\/strong> se usa para crear un mapa de imagen y se vincula a la imagen mediante el atributo de nombre requerido:<\/p>\n\n\n\n
<map name=\"workmap\">. El atributo name<\/em> <\/strong>debe tener el mismo valor que el atributo usemap<\/em> <\/strong>de <img><\/em><\/strong>.<\/pre>\n\n\n\n
Las \u00e1reas<\/h2>\n\n\n\n
Luego, agrega las \u00e1reas<\/strong> en las que se puede hacer clic. Un \u00e1rea<\/strong> en la que se puede hacer clic se define mediante un elemento <area><\/em><\/strong>.<\/p>\n\n\n\n
shape<\/h3>\n\n\n\n
Debes definir la forma del \u00e1rea en la que se puede hacer clic y puedes elegir uno de estos valores:<\/p>\n\n\n\n
    \n
  • rect<\/strong>: define una regi\u00f3n rectangular<\/li>\n\n\n\n
  • circle<\/strong>: define una regi\u00f3n circular<\/li>\n\n\n\n
  • poly<\/strong>: define una regi\u00f3n poligonal<\/li>\n\n\n\n
  • default<\/strong>: define toda la regi\u00f3n<\/li>\n<\/ul>\n\n\n\n
    Tambi\u00e9n debes definir algunas coordenadas para poder colocar el \u00e1rea en la que se puede hacer clic en la imagen.<\/p>\n\n\n\n
    shape=\u00bbrect\u00bb<\/h3>\n\n\n\n
    Las coordenadas para shape=\u00bbrect\u00bb<\/em><\/strong> vienen en pares, una para el eje x y otra para el eje y.<\/p>\n\n\n\n
    Entonces, las coordenadas 34,44 se ubican a 34 p\u00edxeles del margen izquierdo y a 44 p\u00edxeles de la parte superior, Las coordenadas 270,350 se ubican a 270 p\u00edxeles del margen izquierdo y a 350 p\u00edxeles de la parte superior:<\/p>\n\n\n\n
    Ahora tenemos suficientes datos para crear un \u00e1rea rectangular en la que se puede hacer clic:<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <area shape=\"rect\" coords=\"34, 44, 270, 350\" href=\"computer.htm\"><\/pre>\n\n\n\n
    shape=\u00bbcircle\u00bb<\/h3>\n\n\n\n
    Para agregar un \u00e1rea circular, primero ubica las coordenadas del centro del c\u00edrculo:<\/p>\n\n\n\n
    337,300<\/p>\n\n\n\n
    Luego especifica el radio del c\u00edrculo:<\/p>\n\n\n\n
    44 p\u00edxeles<\/p>\n\n\n\n
    Ahora tienes suficientes datos para crear un \u00e1rea circular en la que se puede hacer clic:<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <area shape=\"circle\" coords=\"337, 300, 44\" href=\"coffee.htm\"><\/pre>\n\n\n\n
    shape=\u00bbpoly\u00bb<\/h3>\n\n\n\n
    El shape=\u00bbpoly\u00bb<\/em><\/strong> contiene varios puntos de coordenadas, lo que crea una forma formada con l\u00edneas rectas (un pol\u00edgono).<\/p>\n\n\n\n
    Esto se puede utilizar para crear cualquier forma.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <area shape=\"poly\" coords=\"140,121,181,116,204,160,204,222,191,\n270,140,329,85,355,58,352,37,322,40,259,103,161,128,147\"\nhref=\"croissant.htm\"><\/pre>\n\n\n\n
    Mapa de imagen y Javascript<\/h2>\n\n\n\n
    Un \u00e1rea en la que se puede hacer clic tambi\u00e9n puede activar una funci\u00f3n de JavaScript<\/strong>. Agrega un evento de clic al elemento <area><\/em><\/strong> para ejecutar una funci\u00f3n de JavaScript:<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <map name=\"workmap\">\n  <area shape=\"circle\" coords=\"337,300,44\" href=\"coffee.htm\" onclick=\"myFunction()\">\n<\/map>\n\n<script>\nfunction myFunction() {\n  alert(\"You clicked the coffee cup!\");\n}\n<\/script><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Con los mapas de im\u00e1genes HTML, puedes crear \u00e1reas en las que se puede hacer clic en una imagen. La […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":18,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-137","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Con los mapas de im\u00e1genes HTML, puedes crear \u00e1reas en las que se puede hacer clic en una imagen. La […]","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/137\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/137\/revisions\/139"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}