[HTML][AVANZADO] Mapas intereactivos

ANTRAX · Febrero 24, 2010, 11:54:55 AM

Mapas Interactivos

Posiblemente, la forma mas elegante y "profesional" de usar los links en las imagenes sea el mapa interactivo. El problema consiste en que también es la forma mas compleja y trabajosa. Si quieres saltarte este capítulo hasta que domines mejor el tema, yo lo entenderé y no te culparé por ello.

Veo que te interesa lo suficiente como para seguir leyendo, pues vamos allá. El mapa interactivo es, simplemente, un gráfico en el que hemos definido una serie de zonas. Cada una de estas zonas tiene un link asociado que enviará a donde decidamos a quien pique en él con el ratón.

El primer paso para la creación de un mapa es, logicamente, crear una imagen sobre la que trabajar, decidiendo qué zonas corresponderán a cada link. Suponiendo que hayas hecho esto (no es tan facil como parece, pero esto es un curso de Edición Extremadamente Simple de HTML, no de grafismo), el siguiente paso es poner por escrito esas zonas en la siguiente estructura:

<MAP NAME=nombre>
<AREA SHAPE=tipo COORDS=coordenadas HREF=dirección>
...
...
</MAP>

<MAP> y </MAP> le dicen al navegador donde empieza y acaba la definición del mapa (hasta aquí es facil). Este tag tiene una opción que es NAME=, y que sirve para darle un nombre al mapa. Nombre que luego tendremos que usar (Sin prisas, todo llegará).

<AREA> es un tag que no hay que cerrar y que define una zona concreta de nuestro mapa, la que, al picar con el ratón, nos linkará a un lugar concreto. O sea, que habrá tantos <AREA> como links queramos en nuestro mapa. Veamos sus opciones:

SHAPE= define la forma de esta zona, que puede ser: RECT (Rectangular), CIRCLE (Circular) o POLY (Un polígono cualquiera).

COORDS= indica las coordenadas de la zona que ya definimos en SHAPE=, su valor depende del tipo que escogieramos en esa opción como podemos ver abajo:

En el caso de que usaramos RECT, COORDS= indicará cuatro números separados por comas, los dos primeros son las coordenadas X e Y del vértice superiór izquierdo, y los dos últimos las coordenadas X e Y del inferior derecho.

En el caso de CIRCLE, COORDS= indicará tres números separados por comas, los dos primeros son las coordenadas X e Y del centro del circulo, y el tercero su radio.

Y en el caso de POLY, COORDS= indicará tantos pares de números separados por comas com vertices tenga el poligono. cada par indicando las coordenadas X e Y de un vertice.

HREF=, por último, indica la dirección a la que el link del area indique.

Una vez definidas las zonas, hay que situar la imagen en la peich. esto se hace como para cualquier otra imagen con link, pero con una minuscula y sutil diferencia:

<A><IMG SRC=grafico USEMAP=#nombre></A>

USEMAP= es una opción de <IMG> que hace que el browser sepa que se las vé con un mapa interactivo. y que este mapa se llama lo que hayas puesto en nombre (¡Ajá! Ya sabemos para qué servía la opción NAME= en el tag <MAP>)

Cierto, parece muy complicado pero, como siempre, un ejemplo puede resolver muchas dudas:

Código: html5

<HTML>
<HEAD>
<TITLE>Cuadro</TITLE>
</HEAD>
<BODY>

<MAP NAME="Mapa">
<AREA SHAPE="RECT" COORDS="0, 0, 50, 50" HREF="verde.html">
<AREA SHAPE="CIRCLE" COORDS="75, 75, 25" HREF="violeta.html">
<AREA SHAPE="RECT" COORDS="0, 80, 40, 99" HREF="rojo.html">
</MAP>

Ejemplo de un mapa interactivo. Pica en el cuadro para acceder a las páginas Verde, Violeta y Rojo (También tendrás que crear esas páginas)
<BR>&nbsp;
<CENTER><A><IMG SRC="cuadro.gif" USEMAP="#Mapa"></A></CENTER>

</BODY>
</HTML>

Se puede colocar un texto alternativo en cada zona del mapa usando la opción ALT="Texto en cuestión" en el tag <AREA>, sustituyendo, evidentemente, la frase "Texto en cuestión" por lo que quieras poner.

El problema es que no hay muchos navegadores que reconozcan ALT aplicado a los mapas interactivos. De todos modos, no provoca ningún problema ponerlo y, además, es obligatorio.

Otra opción moderadamente útil es poner en el tag <AREA>, en lugar de HREF=, la orden NOHREF, que le indicará al navegador que picar ahí no linka a ningún sitio.(sí, solo es MODERADAMENTE útil)

También puede interesarte saber que la descripción del mapa puede estar en otra página, o incluso en un archivo de texto plano (como un .TXT) con tan solo poner la dirección completa en el atributo USEMAP= del tag <IMG>. (Como, por ejemplo: USEMAP="directorio/archivo.txt#Mapa"

Por último, solo queda decir que al tag <IMG> se le pueden aplicar los atributos habituales (BORDER, ALIGN, ect.) sin problemas.

Fuente: psicobyte

arthusu · Mayo 16, 2011, 12:20:32 AM

Bueno no es mala idea agregar informacion tambien de dreamweaver para el tema:

Mapas de Imágenes con DreamWeaver

Cada vez que usted inserta una imagen a su documento podrá observar en la parte inferior izquierda del panel Propiedades algo similar a lo siguiente:

Lo cual indica que usted puede crear mapas de imágenes, un mapa de imagen simplemente es una imagen que se ha divido en varias zonas interactivas. Estas zonas interactivas generaran una cierta acción al hacer click en ellas. Estas acciones implican abrir un nuevo documento, esto se hace a través de vínculos.

En fin, para insertar un mapa de imagen, en primera instancia deberá seleccionar la imagen, seguidamente desde el panel Propiedades en el cuadro de texto Mapa, asigne un nombre que identifique al mapa de imagen, este nombre debe ser exclusivo para ese mapa. Esto es importante hacerlo notar, ya que es posible que usted defina más de un mapa de imagen en un mismo documento, por lo cual es importante diferenciar muy bien un mapa de otro.

Para crear las zonas interactivas tiene tres opciones: La herramienta zona interactiva oval

, la herramienta zona interactiva rectángular

y la herramienta zona interactiva poligonal

Las dos primeras herramientas trabajan de manera similar, debe ubicarse dentro de la imagen y luego arrastrar el cursor del mouse hasta que usted lo considere adecuado.

La tercera herramienta le permitirá crear zonas interactivas irregulares, para trabajar con esta herramienta en primer lugar debe ubicarse dentro de la imagen, para comenzar la zona interactiva haga click al botón izquierdo del mouse, para continuar la construcción de la zona interactiva irregular deberá dar click en las esquinas de lo será dicha zona, Dreamweaver se encargara de unir los puntos trazando una recta entre ellos. Para finalizar la zona interactiva irregular deberá seleccionar la herramienta Puntero

Luego de tener todas las zonas interactivas de nuestro mapa de imagen listas, procederemos a seleccionar cada una de estas zonas y se le asignara un comportamiento. Para asignar los comportamientos a dichas zonas nos dirigiremos al panel Propiedades.

A continuación se detallan las opciones que se presentan en el panel Propiedades:

Vínculo
Como se menciono previamente en este artículo la acción que generan las zonas interactivas al hacer click en ellas es abrir un nuevo documento, esto se hace a través de vínculos. Por lo tanto, podremos realizar lo siguiente:
Abrir una nueva página HTML, una imagen, un PDF, entre otros.
Crear un vínculo de anclaje con nombre, lo cual conduce a una parte especifica dentro de un documento.
Un vínculo de correo electrónico.
También cabe la posibilidad de generar vínculos a scripts.
Destino
Acá se encuentran las opciones: _blank, _parent, _top, _self.
alt —Texto Alternativo—
Es muy importante que usted rellene este campo en cada zona interactiva que cree. Macromedia Dreamweaver le advierte sobre ello: Describa el mapa de imágenes en el campo 'alt' del inspector de Propiedades. Esta descripción ayudará a las personas con problemas de visión que utilizan herramientas que les leen páginas web.
Clase
Esto se refiere a alguna clase de estilo para la imagen especificada, esto se puede controlar a través de las hojas de estilo en cascada o CSS, también puede implementarse para algún tipo de script que necesite de este campo para realizar sus funciones.
Al finalizar el rellenado de todas las propiedades de cada una de las zonas interactivas que definio en el mapa de imágenes, haga click en una área en blanco del documento para que de esta manera cambie el panel Propiedades y continue con su trabajo.

Por Milton Mazzarri

saludos y es algo que le agregue nada mas para que puedan aprender de 2 formas

[HTML][AVANZADO] Mapas intereactivos

ANTRAX

Febrero 24, 2010, 11:54:55 AM Ultima modificación: Mayo 02, 2014, 10:30:28 PM por Destructor.cs

arthusu

Mayo 16, 2011, 12:20:32 AM #1 Ultima modificación: Mayo 03, 2014, 05:46:29 PM por Destructor.cs