Mapas

Hemos visto varias formas de enlazar una página con otra, por medio de un enlace de texto o por medio de una imagen. En este último caso se usaba toda la imagen para enlazar. En los mapas también se utiliza una imagen, pero aquí se divide la imagen, de tal forma que cada parte de la imagen nos lleve a un enlace distinto. Imagine una imagen del mundo, donde al hacer un clic en cada país nos lleve a la página de dicho país.

Ejemplo 21:Crearemos una página tal que al hacer clic al profesor nos enlacemos con el ejemplo 16 y al hacer clic al esqueleto nos enlacemos con el ejemplo 17.

Las imágenes a usar sólo pueden ser del tipo GIF o JPG, sino no funciona. Primero: Averigüemos las coordenadas en nuestra imagen Podemos usar Photoshop o Paint para saber las coordenadas de nuestra imagen. En este caso para no complicarnos usemos Paint.
1. Abra el Paint y cargue el archivo “El Profe Díaz.gif”.


2. Ahora usando la herramienta “Selección” determine las coordenadas del profesor y del esqueleto. Obtendrá algo parecido a lo que muestra la siguiente figura:


3. Con estos datos procedemos a crear la página. Para ello usamos siguiente etiqueta:

<IMG SRC="el profe díaz.gif" usemap="#elprofe">
<MAP name="elprofe">
<AREA shape="rect" coords="20,24,145,260" ALT=”Hola” HREF="ejemplo16.htm"> <AREA shape="rect" coords="185,15,260,235" HREF="ejemplo17.htm"></A>

No conviene usar los parámetros Hight y Width pues cambiarían la forma de la figura original y las coordenadas serían distintas.
Además de usar una forma rectangular (shape=“rect”) también podemos usar una forma circular (shape=“circle” ) sólo que en este caso debemos usar las coordenadas del centro y el radio, por ejemplo se escribiría así: coords=“A,B,R”.



Además de usar una forma rectangular (shape=“rect”) también podemos usar una forma poligonal (shape=“poly”) sólo que en este caso debemos usar las coordenadas de cada vértice del polígono hasta cerrar el polígono, por ejemplo si queremos un área en forma de estrella sería así: coords=“A,B,C,D,E,F,G,H,I,J,K,L,M,N,Ñ,O,P,Q,R,S,A,B”