Primero insertas el código html de la imagen, con su ruta, claro, y le colocas al final del código usemap="#xxxxx" donde xxxxx lo eliges tu y será el nombre que le das al mapa de la imagen.
[contenido no disponible]
Seguidamente, en la línea siguiente, defines el mapa con sus distintas zonas. La definición del mapa empieza con esta lína:
<map name="mimapa">
y termina con esta otra:
</map>
Entre esas dos líneas defines cada una de las zonas del mapa. Cada una de esas zonas tendrá un enlace a una página diferente si lo deseas. Una zona se define así, por ejemplo, para un rectangulo se pone:
<!zona uno>
<area shape="rect" href="destino-uno.html" coords="140,20,280,60">
En shape se pone rect, de rectangulo y de las 4 ultimas cifras que ves, las doa primeras son las coordenadas del vertice de arriba a la izquierda (140,20) y las dos segundas las del vertice de abajo a la derecha (280,60).
Para definir un poligono de tres lados, haces lo mismo, pero en lugar de rect le pones poly y le das además 6 cifras. Cada par de cifras son las coordenadas horizontal y vertical de cada uno de los tres vertices.
<!zona dos>
<area shape="poly" href="destino-dos.html" coords="100,100,180,80,200,140">
Para definir un circulo, se pone circle en el shape. Las coordenadas a definir para un circulo serán las del centro (80,100) y el radio del mismo (60):
<!zona tres>
<area shape="circle" href="destino-tres.html" coords="80,100,60">
</map>
Dentro de la definicion del mapa, puedes poner todas las zonas que quieras. Así, si en una imagen tienes un rectangulo, un circulo y un triangulo y a cada uno le quieres asignar un enlace distinto, puedes poner algo así:
[contenido no disponible]
<map name="mimapa">
<!zona uno>
<area shape="rect" href="page.html" coords="140,20,280,60">
<!zona dos>
<area shape="poly" href="image.html" coords="100,100,180,80,200,140">
<!zona tres>
<area shape="circle" href="new.html" coords="80,100,60">
</map>
Lo más complicado quizás sea saber las cifras que tienes que poner para cada zona. Cada una de estas cotas o dimensiones, están medidas desde la esquina superior izquierda si no recuerdo mal y se expresan en pixeles.
Ante cualquier duda ya sabes! Y perdona no haberte respondido antes, se me pasó este mensaje! :oops:
Lo que está en colores es lo que debes poner a tu gusto.
