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>

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>

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:

¡Deja tus dudas en los comentarios!

5/5 - (8 votos)