MAPAS GRÁFICOS

|Introducción| |Head| |Body| |Formato| |Cabeceras y Párrafos| |Fuentes| |Líneas| |Listas| |Imágenes| |Enlaces| |Marquesina|
|Sonido y Vídeo| |Mapas Gráficos| |Tablas| |Marcos| |Formularios| |Estilos| |Capas y Applets| |Caracteres especiales|

Los mapas gráficos consisten en un gráfico (gif, jpg o png) dividido en partes, de modo que al pulsar una de esas partes nos manda a donde queramos. Imagina una imagen de un mapa de España donde al pulsar en Andalucía nos fuéramos a la Junta de allí, y pulsando Castilla y León nos mandara a la Junta del otro lado. Pues eso es un mapa gráfico.

Se puede hacer a mano pero, cuando es complicado, es mejor hacerlo con un programa como el Mapedit u otros, que es como yo he hecho el que vais a ver.

Esta es la imagen. Como veis, hay unos espacios blancos que definen 3 figuras geométricas. Pulsando en ellas nos iremos a otra página, pero no ahora, ahora es una imagen simple, sin enlaces.

La etiqueta para definir el mapa es <MAP> con el atributo NAME y el valor que yo quiera (sin espacios y entre comillas). Se cierra.

<BODY>
<MAP NAME="mimapa">
</MAP>

</BODY>

Ahora definimos las zonas activas con <AREA>, que no se cierra y que lleva atributos como SHAPE con valores rect, circle y polygon; y el atributo COORDS que definirá las coordenadas del dibujo donde estará la zona activa o de enlace.

Si es un rectángulo (rect) las coordenadas (COORDS) serán 4 valores numéricos, los dos primeros son el "x" e "y" del ángulo superior izquierdo y los otros dos el inferior derecho (eso se averigua con un programa de dibujo). Se le añade ALT con la descripción que se verá al dejar el cursor encima, lo que sólo funciona en Explorer (el atributo TITLE se ve en los dos).

<BODY>
<MAP NAME="mimapa">
<AREA SHAPE=rect COORDS=66,34,149,114 TITLE="cuadrado">
</MAP>
</BODY>

Ahora a por el polígono donde deberemos conocer las coordenadas de los distintos puntos (x1,y1), (x2,y2) y (x3, y3), etc.

<BODY>
<MAP NAME="mimapa">
<AREA SHAPE=rect COORDS=66,34,149,114 TITLE="cuadrado">
<AREA SHAPE=poly COORDS=100,144,211,160,217,210,190,229,170,194,128,210,118,236,81,203 TITLE="polígono">
</MAP>
</BODY>

Y, por último, el círculo, cuyas coordenadas van a ser el (x,y) del centro y el valor del radio (54 en este caso).

<BODY>
<MAP NAME="mimapa">
<AREA SHAPE=rect COORDS=66,34,149,114 TITLE="cuadrado">
<AREA SHAPE=poly COORDS=100,144,211,160,217,210,190,229,170,194,128,210,118,236,81,203 TITLE="polígono">
<AREA SHAPE=circle COORDS=294,91,54 TITLE="círculo">
</MAP>
</BODY>

Quedan por definir los lugares donde mandamos al navegador cuando pulsamos en los sitios definidos. Esto se hace con el atributo HREF (hiperlink reference) con el valor del lugar HTTP donde queremos enviar al usuario al pinchar (http://www.google.es), o, como también se puede ver aquí, a una página que está en el mismo sitio que el documento y que también es mía (prueba2.htm). Esto se vio en el capítulo "ENLACES".

<BODY>
<MAP NAME="mimapa">
<AREA SHAPE=rect COORDS=66,34,149,114 TITLE="cuadrado" HREF="prueba2.htm">
<AREA SHAPE=poly COORDS=100,144,211,160,217,210,190,229,170,194,128,210,118,236,81,203 TITLE="polígono" HREF="http://www.google.es">
<AREA SHAPE=circle COORDS=294,91,54 TITLE="círculo" HREF="prueba2.htm">
</MAP>
</BODY>

Y la zona que no va a tener nada, que es precisamente todo menos lo que ya hemos definido. Si no hacemos esto todo el mapa será el enlace. Se hace con:

<AREA SHAPE="default" NOHREF>

que indica que el resto del mapa (DEFAULT) no tenga enlace (NOHREF).

<BODY>
<MAP NAME="mimapa">
<AREA SHAPE=rect COORDS=66,34,149,114 TITLE="cuadrado" HREF="prueba2.htm">
<AREA SHAPE=poly COORDS=100,144,211,160,217,210,190,229,170,194,128,210,118,236,81,203 TITLE="polígono" HREF="http://www.google.es">
<AREA SHAPE=circle COORDS=294,91,54 TITLE="círculo" HREF="prueba2.htm">
<AREA SHAPE="default" NOHREF>
</MAP>
</BODY>

Ya sólo queda poner, fuera de la etiqueta <MAP> </MAP>, antes o despues (da igual), la etiqueta que indica cual es la imagen a la que hacemos todo esto:

<IMG SRC="mapa.jpg" USEMAP="#mimapa">

El nombre "mimapa" es el que definí al principio en NAME. Lo pondré al final para no confundir.

<BODY>
<MAP NAME="mimapa">
<AREA SHAPE=rect COORDS=66,34,149,114 TITLE="cuadrado" HREF="prueba2.htm">
<AREA SHAPE=poly COORDS=100,144,211,160,217,210,190,229,170,194,128,210,118,236,81,203 TITLE="polígono" HREF="http://www.google.es">
<AREA SHAPE=circle COORDS=294,91,54 TITLE="círculo" HREF="prueba2.htm">
<AREA SHAPE="default" NOHREF>
</MAP>
<IMG SRC="mapa.jpg" USEMAP="#mimapa">
</BODY>

Observa cómo todo el gráfico se bordea de azul, lo que indica que tiene enlaces. Lo podemos quitar con el atributo BORDER y el valor de 0

<IMG SRC="mapa.jpg" USEMAP="#mimapa" BORDER=0>.