El atributo usemap del tag img de HTML te permite colocar links dentro de una imagen. Para ello te permite crear coordenadas en la imagen y de este modo especificar una área para que ésta sea un link. Este atributo, usemap, le indicas si quieres marcar una área rect (rectángulo), cirlce (círculo) o poly (polígono).

Cada forma tiene su especificación: rect le tienes que pasar 4 coordenadas, circle 3 coordenadas, las dos primeras el punto de origen y el tercer parámetro el radio y poly es una figura libre en la que pasas las coordenadas que requieras para formar el área que necesitas. Un ejemplo sería:


<map id="geometricas" name="geometricas">
   <area shape="rect" title="" coords="14,16,93,92" href="circulo.html"/>
   <area shape="circle" title="" coords="196,62,45" href="cuadrado.html" />
   <area shape="poly" title="" coords="34,192,81,118,134,195,97,190" href="trinagulo.html"/>
</map>

Pero esto es muy muuuuy tedioso de hacer, por eso te muestro este sitio online en el que:

  1. Cargas tu imagen
  2. Seleccionas el tipo de coordenadas circle, rect o poly
  3. Seleccionas con el mouse el área que necesitas
  4. Obtienes el código html de las coordenadas y listo 😀

El sitio es  maschek.hu 

También tengo un post paso a paso de esta herramienta y además de hacer que los links sean responsive, que puedes ver aquí

 

Anuncios