9.2 Clickable mapas de imagen

Un dispositivo gráfico común en la Web es la imagen del mapa puede hacer clic. Un mapa de imagen seleccionable es un gráfico que tiene varios hipervínculos, y, tal vez, scripts de Java, asociado a una sola imagen. Esta imagen permite que el diseñador Web de enlaces asociados y acciones dinámicas a las señales gráficas.

A modo de ejemplo, un uso de un mapa de imagen seleccionable puede ser para una agencia de viajes que ofrecen paquetes de vacaciones a diferentes lugares exóticos alrededor del mundo. Un Mapa interactivo de imagen del mundo podría ser construido para contener hipervínculos con claves para la ubicación de un clic del ratón sobre el mapa. Por ejemplo, al hacer clic en Francia podría enviar al usuario a otra página web con detalles de paquetes de vacaciones, sitios para ver, lugares para alojarse, y restaurantes para probar cuando visite París. Al hacer clic en Venezuela podría enviar al usuario a páginas de Caracas, y así sucesivamente.

Mapas de imagen seleccionables son dispositivos muy útiles para la Web, ya que representan un suplente medios gráficos de navegación a otras páginas. Un problema, sin embargo, es que pueden ser difíciles de construir. Para cada hipervínculo, una región de la imagen debe ser definida que activa el enlace cuando el ratón se hace clic en él. Esta región se define por un polígono, que a su vez está especificado por un conjunto de pares de coordenadas que dan las ubicaciones de los vértices del polígono. La dificultad viene de tratar de determinar los valores de las coordenadas. Para un mapa de imágenes que contiene muchos hipervínculos asociados a regiones complicadas, la tarea de ensamblar estos puntos puede ser muy difícil.

Afortunadamente, el ImageMap plug-in, que se encuentra en la imagen: Filtros / Web de menús, le permite introducir los vértices de las regiones poligonales dibujando directamente sobre la imagen gráfica. El plug-in también permite asignar fácilmente hipervínculos y Java scripts para las regiones. Cuando haya terminado, el plug-in escribe automáticamente el archivo HTML que muestra el mapa de imagen de nueva creación. Toda la información de posición sobre los vértices de las regiones del mapa se escribe en este archivo junto con los hipervínculos y referencias a los scripts de Java asociados a las regiones.

La descripción inicial de cómo el ImageMap plug-in funciona se basa en la imagen en blanco se muestra en la Figura 9.13 (a).

Figura 9.13: El ImageMap Plug-in

Una imagen en blanco no es muy útil como un práctico mapa de imagen, pero es genial para ilustrar cómo el ImageMap plug-in funciona. Figura 9.13 (b) ilustra la ImageMap de diálogo, que consta de tres áreas principales. No es el lienzo de dibujo, donde se muestra la imagen que se está creando el mapa. Debido a que la imagen de la Figura 9.13 (a) está en blanco, el área del lienzo muestra un fondo blanco.A la izquierda del lienzo de dibujo, es la barra de herramientas que contiene la selección y edición de iconos de función. Estos se utilizan para dibujar los contornos de las regiones en la imagen que se convertirá en las zonas seleccionables. Por último, está la lista de regiones, que se encuentra a la derecha del área de lienzo de dibujo. Esto se utiliza para organizar y editar la lista de regiones dibujadas.

Los ImageMap herramientas de selección se utilizan para definir las regiones seleccionables. Las opciones de la herramienta de selección son rectangular, circular, poligonal y. De los tres, la herramienta de polígono es el más general, ya que permite a las más complejas formas que desea seleccionar. Figura 9.14 (a)

Figura 9.14: Selección de una región poligonal

ilustra una forma irregular hecho con la herramienta de selección poligonal. La forma se hace clic en el botón de la herramienta de selección poligonal y, a continuación, haga clic en los puntos en el área de lienzo de dibujo. Cada punto se convierte en un nuevo vértice del polígono. La selección se termina, y el polígono completamente definido cuando el botón izquierdo del ratón se hace doble clic.

Tan pronto como una zona como el polígono en la Figura 9.14 (a) se ha definido, la configuración de diálogo aparece como se muestra en la Figura 9.14 (b). Esto se utiliza para especificar el hipervínculo asociado a la zona seleccionada. Como se puede ver en el cuadro de diálogo, cualquier vínculo Web válida puede ser especificado. En este ejemplo, el texto http://www.gimp.org se ha introducido como enlace. Además, el texto informativo se ha añadido al campo de comentario en la parte inferior del cuadro de diálogo. La configuración de diálogo permite el polígono sea guiones editados y Java que se asocia con el área seleccionada. Estas funcionalidades se accede haciendo clic en las fichas correspondientes se muestran en el cuadro de diálogo.

Figura 9.15 (a)

Figura 9.15: Gestión de las regiones seleccionadas

muestra el ImageMap de diálogo después de varias áreas han sido seleccionados. Las tres áreas son cada muestra en la lista de regiones, y el activo está resaltado en azul. Las herramientas de edición se pueden utilizar para modificar cualquiera de las áreas en la lista de regiones. Usted puede hacer un campo particular activa haciendo clic sobre ella, puede eliminar el área activa haciendo clic en el botón que muestra el rojo, X icono, y usted puede abrir el área de configuración de diálogo haciendo clic en el botón que muestra el icono del lápiz.

Como se ve en la Figura 9.15 (a), los puntos de la región activa se muestran como cuadrados rojos. Es posible insertar, eliminar o mover estos puntos. Elegir el icono de la flecha de las herramientas de selección, cualquier punto se puede mover haciendo clic y arrastrando. Un punto se puede eliminar, haga clic en él, lo que le lleva al menú mostrado en la figura 9.15 (b). Un punto puede ser añadido a un segmento de línea, haga clic en él, lo que hace aparecer el menú se muestra en la Figura 9.15 (c).

Después de todas las áreas deseadas han sido seleccionadas, hipervínculos definidos, puede guardar el trabajo haciendo clic en el icono del disquete o de la selección de las Guardar como función en el menú Archivo. Se abrirá un cuadro de diálogo que permite un nombre de archivo que se introduzca. Este debe ser un archivo cuya extensión termine en . HTML o . htm .

Un ejemplo más realista de la ImageMap de plug-in de uso se ilustra con la imagen que se muestra en la Figura 9.16 (a).

Figura 9.16: Mapa del sureste de los Estados Unidos y la ImageMap diálogo

Esta imagen es un mapa del sur-este de Estados Unidos. Cada uno de los diez estados se designa con la abreviatura de dos letras: FL en Florida, Georgia para Georgia, AL de Alabama, y así sucesivamente.El objetivo es crear un mapa de imagen con un hipervínculo para cada estado. Figura 9.16 (b) muestra la ImageMap de diálogo con la imagen de la Figura 9.16 (a) carga en el área de lienzo de dibujo. El contorno de cada estado se puede hacer fácilmente usando la herramienta de selección poligonal. Cuando todos los estados han sido delineadas, y cuando se guarda el resultado final se produce el siguiente archivo:

Como puede ver, cada una de las áreas definidas en el ImageMap de diálogo se especifica por un AREA etiqueta de marcado de hipertexto. Esta etiqueta contiene las coordenadas de la región del polígono y el texto del hipervínculo asociado. El ejemplo descrito anteriormente puede ser visto como un documento HTML haciendo clic aquí. archivos HTML creados con ImageMap se pueden recargar y editados por el plug-in. Normalmente, esto se hace mediante la recarga de la imagen original en el GIMP, corriendo el ImageMap plug-in en la imagen y, a continuación, cargar el archivo de mapa de imágenes guardadas con el Abierto de comando desde el plug-in del archivo de menú. Figura 9.17

Figura 9.17: El mapa de imagen Reloaded en un fondo blanco

muestra el resultado de hacer esto con el archivo HTML creado para la Figura 9.16 . Sin embargo, en lugar de correr el ImageMap plug-in en la imagen del mapa original, que se realiza en una imagen en blanco que tiene las mismas dimensiones que el mapa. Esto le permite ver claramente las regiones mapas de imágenes cargadas contra el fondo blanco. Hacer esto no tiene aplicación práctica, pero es una buena manera de ilustrar los resultados del ejemplo. Tenga en cuenta que el área de lista de regiones muestra que cada uno de los 10 estados tiene una entrada. Al hacer clic en una entrada en esta lista destaca la región en el lienzo de dibujo, como se ilustra en el estado de Alabama en la figura 9.17 .

Como nota final, con un explorador Web, puede abrir el archivo HTML creado por ImageMap para comprobar que funciona correctamente. Si es necesario, puede editar el archivo HTML directamente con un editor de texto. Figura 9.18

Figura 9.18: Mapa de los Estados Unidos surorientales Visto en Netscape

muestra cómo el mapa de imágenes se puede hacer clic en los ejemplos anteriores muestra en el navegador web Netscape Navigator. Observe que el cursor del ratón, representada por la pequeña mano apunta hacia la izquierda, se encuentra en el extremo inferior del estado de Florida. El hecho de que el cursor del ratón aparece como una mano significa que es sobre un enlace HTML activo, y en la parte inferior de la ventana del navegador se puede ver en el hipervínculo correspondiente en el campo de información de enlace.

El ImageMap plug-in tiene muchas otras características. Este libro no es el lugar adecuado para cubrir este plug-in en detalle. Sin embargo, la mayoría de las características que no son difíciles de descubrir, y usted debería ser capaz de determinar su uso con un poco de experimentación.

Page updated

Google Sites

Report abuse