Un mapa de imagen es una imagen que se puede usar como uno o más hipervínculos. Por lo general, un mapa de imagen tendrá múltiples áreas seleccionables o en las que se puede hacer clic que se vinculan a otra página web o sitio web. Las áreas seleccionables se llaman hotspots. Los mapas de imágenes pueden configurar áreas seleccionables en tres formas: rectángulos, círculos y polígonos. Un mapa de imagen requiere el uso del elemento image, elemento map y uno o más elementos de área.

1. Elemento <map>

Un elemento <map> define el mapa de imagen del lado del cliente. El mapa de imagen es una imagen con un área diferente a la que se puede hacer clic.

El elemento map es una etiqueta de contenedor que indica el comienzo y el final de la descripción del mapa de imagen. El atributo name está codificado para asociar la etiqueta <map> con su imagen correspondiente. El atributo id debe tener el mismo valor que el atributo name. Para asociar un elemento de mapa con una imagen, configura la etiqueta de imagen (img) con el atributo usemap para indicar cuál <map> usar.

<img usemap="#nombre_map">
<map name="nombre_map"> </map>

2. Elemento <area>

El elemento area define las coordenadas o bordes del área en la que se puede hacer clic. Es una etiqueta vacía que utiliza los atributos href, alt, title, shape y coords. El atributo href identifica la página web para mostrar cuando se hace clic en el área. El atributo alt proporciona una descripción de texto para lectores de pantalla. Usa el atributo title para especificar el texto que algunos navegadores pueden mostrar como información sobre herramientas cuando el mouse se coloca sobre el área. El atributo coords indica la posición de coordenadas del área en la que se puede hacer clic. La tabla siguiente describe el tipo de coordenadas necesarias para cada valor del atributo shape:

Shape/FormaCoordenadasSignificado
rect“x1,y1, x2,y2”Las coordenadas en el punto (x1, y1) representan la esquina superior izquierda del rectángulo. Las coordenadas en el punto (x2, y2) representan la esquina inferior derecha del rectángulo.
circle“x,y,r”Las coordenadas en el punto (x, y) indican el centro del círculo. El valor de r es el radio del círculo, en píxeles.
polygon“x1,y1, x2,y2, x3,y3”, etc.Los valores de cada par (x, y) representan las coordenadas de un punto de esquina del polígono.
<img usemap="#nombre_map">
<map name="nombre_ma">
    <area shape="valor-forma" coords="valor-coordenada">
</map>

3. Ejemplos con la etiqueta <map>

El elemento <map> tiene atributo name obligatorio. El atributo name <map> se asocia con el atributo usemap de <img> y crea una relación con el elemento <map> y <img>. <img> no debe ser hijo del elemento anchor (<a>) y el elemento botón (<button>).

El siguiente ejemplo llega gracias a @Sven Wolfermann:

<div class="m-imagemap">
		<img class="imagemap__img" src="http://maddesigns.de/wp-content/uploads/2014/02/kitty-map.jpg" alt="Infografik1" usemap="#imagemap1" height="600" width="800">
<map id="imagemap1" name="imagemap1">
  <area shape="rect" alt="Ohren" coords="560,68,756,144" href="#map__item1" />
  <area shape="rect" alt="Augen" coords="28,200,244,276" href="#map__item2" />
  <area shape="rect" alt="Barthaar" coords="485,445,760,520" href="#map__item3" />
</map>

		<ul class="imagemap__list">
			<li class="imagemap__item" id="map__item1">
				<h4 class="imagemap__hl">Ohren</h4>
				<div class="imagemap__text">
					<p>Reprehenderit exercitationem beatae ipsam similique assumenda nemo quis quod ut aspernatur rerum nam. omnis dolores nostrum voluptas nulla corporis quasi accusamus. placeat nesciunt rerum velit et rem corporis vel</p>
				</div>
			</li>
			<li class="imagemap__item" id="map__item2">
				<h4 class="imagemap__hl">Augen</h4>
				<div class="imagemap__text">
					<p>Aliquid magnam magni aut corporis quia est quis. vel libero aut aspernatur et. facilis non recusandae ab cumque omnis sunt est officiis repellat libero error consequatur minima. provident sapiente est voluptatem occaecati sunt rerum cumque nesciunt qui vitae nostrum laboriosam. vel quia aliquam unde. necessitatibus accusantium veniam aut</p>
				</div>
			</li>
			<li class="imagemap__item" id="map__item3">
				<h4 class="imagemap__hl">Barthaar</h4>
				<div class="imagemap__text"><p>Magnam ut facere illo molestias repellat numquam rerum. dolorem consequatur harum dolorem voluptatibus officiis praesentium ut et veritatis. unde quia laudantium distinctio laborum sapiente et eos voluptate aperiam magnam repudiandae est. ut aspernatur quia eos et et deleniti assumenda dolorem numquam aperiam magni sed expedita. quod voluptate dicta dolor molestias ea</p></div>
			</li>
		</ul>
	</div>
img {
  max-width: 100%;
  height: auto;
}

.js .imagemap__item {
  display: none;
}
@media screen and (min-width: 48em) {

  .imagemap__item:target {
    display: block;
  }
  .imagemap__item:target > .imagemap__text {
    display: block;
  }
}

La mayoría de los desarrolladores web no codifican mapas de imágenes a mano. Las herramientas de creación web, como Adobe Dreamweaver, tienen características que te ayudan a generar mapas de imágenes. También hay generadores de mapas de imágenes en línea disponibles en:

Etiqueta MAP
5 (100%) 8 votos




Alex Walton

Alex Walton

Aprender desde Cero es tu web para conocer todo sobre informática. Mi nombre es Alex y me gustaría que dejes tu comentario ante cualquier duda o aporte.
"Si no lo consigues a la primera, llámalo versión 1.0"

Comparte este artículo:

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Email
Deja tu comentario
Contenido Relacionado
Etiqueta VIDEO HTML5 con ejemplo

Etiqueta VIDEO

El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad ...
Leer Más
Etiqueta AUDIO HTML5 con ejemplo

Etiqueta AUDIO

El nuevo elemento audio de HTML5 soporta la reproducción nativa de archivos de audio en el navegador sin la necesidad ...
Leer Más
Etiqueta EMBED HTML5 con ejemplos

Etiqueta EMBED

El elemento embed es un elemento autónomo, o vacío (no se utiliza etiqueta de cierre), cuyo propósito es proporcionar un ...
Leer Más
SOBRE NOSOTROS

Somos una web que busca el libre conocimiento en temas relacionados a la informática.

Todos los cursos son gratis. La publicidad nos mantiene activos así que por favor visita a nuestros anunciantes.

RECIBE MUCHOS REGALOS