Mapear una Imagen

El mapeo nos permite dividir una imagen en diferentes partes y asignarle, por ejemplo, a cada parte un hipervínculo.

Lo primero que tenemos que hacer es asignarle a nuestra imagen la propiedad usemap. Para ello vamos al index.php de nuestro template y hacemos lo siguiente.

Por ejemplo si tenemos:

<img src=»img/logo.gif» alt=»Logo de mi Web» width=»359″ height=»75″ border=»0″ />

Haz que quede:

<img src=»img/logo.gif» alt=»Logo de mi Web» width=»359″ height=»75″ border=»0″ usemap=»#mapa1″ />

Luego declaramos nuestro mapa, en este caso un cuadrado:

<map name=»mapa1″ id=»mapa1″>

<area shape=»rect» coords=»128,38,177,49″ href=»link.htm» />

</map>

Donde las coordenadas «X,Y,Z,W» definen:

X pixel inicio y Z pixel final tomado en el ancho de la imagen.

Y pixel inicio y W pixel final tomado en el alto de la imagen.

 

Las formas que se pueden definir son:

  • RECT (rectángulo): «x1,y1,x2,y2»
  • POLY (polígono): «x1,y1,x2,y2,x3,y3,…» definiendo cada pareja (x,y) un vértice del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono.
  • CIRCL (círculo): «x,y,radio» siendo x,y el centro del círculo.

El origen del sistema de coordenadas siempre estará situado en el extremo superior izquierdo de la imagen.

Es posible reemplazar el atributo HREF por NOHREF para una zona neutra de la imagen.