domingo, 21 de julio de 2013

Mapas de imágenes

Qué es un mapa de imagen?

Un mapa de imagen es una imagen que contiene una o más áreas invisibles llamadas zonas activas. Cada una está asociada a un hipervínculo. Normalmente la imagen ofrece al usuario pistas visuales sobre la información que está disponible al hacer clic en cada parte de la imagen.

Para realizar la imagen siguiente, en la que al posicionar el puntero del ratón sobre las flores de color malva aparace un cuadro de texto (tooltip), he utilizado la herramienta on line Image Mapper .

En la parte inferior está disponible el código HTML por si alguien quiere experimentar creando el suyo propio. Al emplear la herramienta anterior, si tus fotos son para blogger, se aconseja redimensionar previamente la imagen original a un tamaño no superior a 640 x 425 píxeles.



Flor 1 Flor 2 <img border="0" src="http://1.bp.blogspot.com/-0do0620RXmM/UeweV7hnhII/AAAAAAAACMA/UDAGV-YbVdI/s1600/98+para+el+blog.jpg" usemap="#imap_88" width="640" />
<map id="imap_88" name="imap_88">
  <area alt="Flor 1" coords="296,121,396,201" href="" shape="rect" title="Flor 1"></area>
  <area alt="Flor 2" coords="144,157,244,237" href="" shape="rect" title="Flor 2"></area>
  <area alt="Flor 3" coords="208,270,308,350" href="" shape="rect" title="Flor 3"></area>
</map>
Flor 3