El uso del elemento area nos sirve para optimizar la carga y la visualización de imágenes, mostrando varias imágenes en una y generando áreas enlazables. En este artículo vamos a ver cómo podemos descargar una imagen de un mapa de imágenes utilizando código HTML5. Es decir, que cuando se pinche sobre un área enlazable, se descargue la imagen asociada a dicho área.
Caso de uso para descargar una imagen de un mapa de imágenes.
El poder descargar una imagen de un mapa de imágenes utilizando código HTML5 nos va a servir para crear galerías de imágenes que estén muy optimizadas, ya que descargamos una única imagen con todas las imágenes. Esto nos será útil para entornos en los que la descarga de elementos sea un hándicap, como puede ser el caso de uso de dispositivos móviles.
Pero ahora lo que haremos será el poder descargar de forma individual cada una de esas imágenes una vez que el usuario pulse sobre una imagen en cuestión. Siendo este momento el único en el que realmente se descarga la imagen en concreto.
De forma visual vamos a recurrir a un mapa de imágenes con los logos de los navegadores web. Esto representará la galería de imágenes:
El funcionamiento será que cuando pulsemos sobre un logo en concreto, se descargará dicha imagen.
Creando el mapa con la imagen.
Lo primero que haremos para poder descargar una imagen de un mapa de imágenes utilizando código HTML5 será crear un mapa con la imagen en el cual insertemos las partes enlazables. Para ello, lo primero será insertar una imagen con el fichero que contenga todas las imágenes mediante un elemento img:
<img src="navegadores.png" alt="Navegadores" usemap="#navegadores" width="821" height="152" />
Ademas, mediante la propiedad usemap vamos a decirle cual es el id que contiene el mapa de imágenes representado mediante un elemento map. Vemos que en este caso el mapa se llama “navegadores”. Así que pasamos a definir el mapa con el elemento map.
<map id="navegadores" name="navegadores"> </map>
El elemento map es muy sencillo y lo que tiene es que tienes que indicar mediante el atributo id cual es el nombre que le damos y que sirve para asociarlo a la imagen anteriormente definida.
Definiendo áreas enlazables
Siguiendo con el ejemplo de descargar una imagen de un mapa de imágenes utilizando código HTML5 nos tocará definir cuales son las diferentes áreas o partes que nos podemos encontrar en la imagen y que representarán los elementos enlazables. Estas áreas se definen mediante el elemento area.
Para ello tenemos que controlar el atributo shape que indica la forma que tiene el área, ya sea un rectángulo, un círculo o un polígono y el atributo coords que contiene las coordenadas que forman los vértices del área que hayamos definido.
De esta manera si queremos trabajar con áreas que sean rectángulos para marcar las diferentes posiciones de nuestro mapa con logos de navegadores, hará que definamos el siguiente código en HTML:
<map id="navegadores" name="navegadores"> <area shape="rect" coords="0,0,157,147" alt="Internet Explorer"> <area shape="rect" coords="164,0,321,147" alt="Firefox"> <area shape="rect" coords="340,0,497,147" alt="Google Chrome"> <area shape="rect" coords="507,0,664,147" alt="Safari"> <area shape="rect" coords="659,0,816,147" alt="Opera"> </map>
Ya tendremos nuestras áreas definidas dentro del mapa asociado a la imagen.
Código para poder descargar una imagen de un mapa de imágenes
El siguiente paso es el más interesante para nuestro ejemplo, ya que es cuando vamos a añadir el código necesario para poder realizar la descarga de la imagen cuando pulsen sobre el logo. Para ello vamos a añadir dos atributos nuevos, por un lado href que nos servirá para enlazar con el fichero que contenga la imagen en concreto y otro que será download. El atributo download nos sirve para indicar que cuando se pulse sobre un enlace lo que se le indique al navegador es que tiene que empezar una descarga del fichero en vez de mostrarlo en pantalla. Dicho atributo puede funcionar solo o asociándolo el nombre que queremos que tenga el fichero que nos vamos a descargar.
Por consiguiente el código que nos queda para los áreas será el siguiente:
<map id="navegadores" name="navegadores"> <area shape="rect" coords="0,0,157,147" href="explorer.png" alt="Internet Explorer" download="internet-explorer.png"> <area shape="rect" coords="164,0,321,147" href="firefox.png" alt="Firefox" download="firefox.png"> <area shape="rect" coords="340,0,497,147" href="google-chrome.png" alt="Google Chrome" download="google-chrome.png"> <area shape="rect" coords="507,0,664,147" href="safari.png" alt="Safari" download="safari.png"> <area shape="rect" coords="659,0,816,147" href="opera.png" alt="Opera" download="opera.png"> </map>
Hay que tener mucho cuidado ya que si este código lo pones en una página web que cargues dentro de tu navegador web en local no va a funcionar. Y esto es importante ya que el atributo download solo nos va a funcionar si lo utilizas en una página web que esté disponble a través de un servidor web.
De esta manera ya habremos terminado de desarrollar nuestro código para descargar una imagen de un mapa de imágenes utilizando código HTML5, lo que te permitirá realizar diseños mucho más eficientes para la descarga en móviles o entornos de poco caudal de datos.
