{"id":3695,"date":"2013-12-24T10:49:20","date_gmt":"2013-12-24T13:49:20","guid":{"rendered":"http:\/\/irisfernandez.com.ar\/betaweblog\/?p=3695"},"modified":"2013-12-24T10:49:20","modified_gmt":"2013-12-24T13:49:20","slug":"mapas-de-imagen","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2013\/12\/24\/mapas-de-imagen\/","title":{"rendered":"Mapas de imagen"},"content":{"rendered":"

\u00bfQu\u00e9 es un mapa de imagen? Se trata de una imagen que contiene zonas sensibles donde, al pasar el mouse, se activa un link. Aqu\u00ed muestro dos variantes: una sola imagen con zonas sensibles, y una segunda opci\u00f3n donde se dividi\u00f3 la gran imagen en tres im\u00e1genes, y se aplic\u00f3 el intercambio de im\u00e1genes explicado en el post anterior.<\/a><\/p>\n

Mapa de imagen con zonas sensibles y enlaces externos<\/strong><\/p>\n

Para realizarlo, se utiliza una imagen de base con la propiedad usemap<\/strong>, que vincula la imagen con el mapa que describimos previamente,\u00a0siempre utilizando el atributo ALT, de acuerdo a las recomendaciones de accesibilidad<\/a>.<\/p>\n

\"Mapamundo<\/p>\n\n\"America\n\"Septentrio\"\n\"Terra\n\"Mar <\/map>\n

Detenga el mouse en los continentes para leer su nombre<\/p>\n

El problema que encontr\u00e9 en este caso, es que en el celular con Android no se muestran los Titles ni los ALT. Este es el c\u00f3digo del mapa de imagen anterior:<\/p>\n

<img alt=”Mapamundo Kepler” src=”800px-Kepler-world.jpg” usemap=”#mapa1″<\/strong> width=”600″ border=”0″ \/><\/p>\n

<map id=”mapa1″ name=”mapa1″<\/strong>><\/p>\n

<area title=”America septentrionalis” alt=”America septentrionalis” coords=”10,10,120,234″ shape=”rect” href=”http:\/\/……” \/><\/p>\n

<area title=”Septentrio” alt=”Septentrio” coords=”150,10,350,225″ shape=”rect” href=”http:\/\/……” \/><\/p>\n

<area title=”Terra Australis Incognita” alt=”Terra Australis Incognita” coords=”150,225,350,450″ shape=”rect” href=”http:\/\/……” \/><\/p>\n

<area title=”Mar di India” alt=”Mar di India” coords=”350,10,550,450″ shape=”rect” href=”http:\/\/……” \/> <\/map><\/p>\n

<p style=”text-align: center;”>Detenga el mouse en los continentes para leer su nombre<\/p><\/p><\/blockquote>\n

Ejemplo sin mapa de imagen<\/strong><\/p>\n

Utilizando lo explicado en el post anterior<\/a>, dividimos la imagen grande en varias im\u00e1genes peque\u00f1as, a las cuales les cambiamos el aspecto al pasar sobre ellas:<\/p>\n

\"America<\/a><\/div>\n
\"Septentrio<\/a><\/div>\n
\"Mar<\/a><\/div>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"

\u00bfQu\u00e9 es un mapa de imagen? Se trata de una imagen que contiene zonas sensibles donde, al pasar el mouse, se activa un link. Aqu\u00ed muestro dos variantes: una sola imagen con zonas sensibles, y una segunda opci\u00f3n donde se dividi\u00f3 la gran imagen en tres im\u00e1genes, y se aplic\u00f3 el intercambio de im\u00e1genes explicado … Continuar leyendo “Mapas de imagen”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3695","post","type-post","status-publish","format-standard","hentry","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=3695"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/3695\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=3695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=3695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=3695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}