14 Steps - Mapas de imagen html

Ahora veremos cuando podemos utilizar un mapa de imágenes en nuestras web. Nos puede ser útiles en menús de inicio (home) y también cuando tenemos una imagen en la que tenemos diferentes zonas para hacer click.
Ahora mostraremos un ejemplo en el que podremos hacer click en cada uno de los primeros cuatro equipos que vemos en la imagen.

Este es el código necesario para realizar el ejemplo,

<img id="Image-Maps_5200911091044394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgTyoTAsKCY46-ElZIMciydoe5ztYGR2R58OJ-Wa0vaprw9l2tYFXatSqQCSnfHnDqoChYMGri9cxFrKfG7UhyphenhyphenKkas9qqB977wCeN-p5wqY38CocTgNC5gAT6ahP5vYGfZBoWyKunGKulQ/" usemap="#equipo" />
<map name="equipo">
<area shape="rect" coords="15,0,73,72" href="http://www.almeriaunion.com/" alt="Almería" title="Almería">
<area shape="rect" coords="72,0,127,72" href="http://www.miathletic.com/" alt="Atlético de Bilbao" title="Atlético de Bilbao">
<area shape="rect" coords="127,0,182,72" href="http://www.colchonero.com/" alt="Atlético de Madrid" title="Atlético de Madrid">
<area shape="rect" coords="181,0,233,72" href="http://www.vamostenerife.com/" alt="Tenerife" title="Tenerife">
</map>