Etiqueta

Dentro del contenedor

• uno o más elementos< >... Estos elementos no tienen contenido, pero definen las regiones geométricas del mapa de imagen y los hipervínculos asociados con cada región.
• contenido a nivel de bloque. Este contenido debe incluir< >que especifican las regiones geométricas del mapa y los enlaces asociados con cada región

Si la etiqueta

Si las regiones se superponen, el elemento que define la región que apareció anteriormente en el documento tiene prioridad.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Sintaxis

Atributos

clase	define el nombre de la clase a usar
dir	define la dirección de los personajes: ltr - de izquierda a derecha rtl - de derecha a izquierda
carné de identidad	identificador único
lang	define el idioma del documento mostrado
nombre	nombre del mapa de imágenes. Usado como el valor del parámetro de etiqueta usemap
en la falta de definición	elemento de pérdida de enfoque
al hacer clic	haga clic en un elemento
ondblclick	haga doble clic en un elemento
enfocado	enfocarse por elemento
onkeydown	presionar una tecla cuando un elemento tiene el foco
onkeypress	presionar y soltar una tecla cuando el elemento tiene el foco
onkeyup	soltar una tecla previamente presionada cuando el elemento tiene el foco
onmousedown	hacer clic en un botón del mouse cuando un elemento tiene el foco
onmousemove	movimiento del puntero del mouse cuando el elemento tiene el foco
onmouseout	mover el puntero del mouse fuera del elemento
el ratón por encima	colocando el puntero del mouse sobre un elemento
onmouseup	soltar un botón del mouse previamente presionado cuando el elemento tiene el foco
estilo	especifica una hoja de estilo en línea
título	información sobre herramientas

Ejemplo

• se requiere la etiqueta de cierre ()
• el atributo id es obligatorio
• se recomienda proporcionar una alternativa textual a la tarjeta gráfica en los casos en que los gráficos no estén disponibles o el usuario no pueda obtenerlos.
• no se recomienda utilizar imágenes de mapas como navegación principal, debido a la mala compatibilidad con navegadores antiguos y de voz.

Etiqueta - elemento de nivel de bloque, es decir el contenido de la etiqueta siempre comienza en una nueva línea. También se agrega un salto de línea después de la etiqueta.

HTML - Lección 15. Mapas de navegación - mapa

Muchas páginas HTML utilizan los denominados mapas de imágenes para organizar los enlaces. En este enfoque, se toma una imagen y se anclan enlaces a sus diversas regiones. El ejemplo más común son los mapas turísticos del mundo, haces clic en su parte con un país y serás llevado a una página dedicada a ese país.

Estos mapas de imágenes pueden ser del lado del cliente y del lado del servidor. Los enlaces de los mapas del cliente se almacenan en el propio documento y, al hacer clic con el ratón, el navegador determina a qué área se refieren las coordenadas de este punto y sigue el enlace deseado.

En la versión del servidor, estas coordenadas se transmiten primero al servidor, se procesan allí mediante un programa especial, y solo después se sigue el enlace. Obviamente, los mapas de navegación del lado del cliente son preferibles. Los consideraremos.

Por ejemplo, imaginemos que somos una tienda de electrodomésticos y en la cabecera de nuestra web tenemos la siguiente imagen:

Hagamos un mapa de navegación con él, es decir al hacer clic en un refrigerador lo llevará a una página dedicada a los refrigeradores (con modelos, descripciones y precios), haciendo clic en una aspiradora y lavadora a sus respectivas páginas.

Para hacer esto, necesitamos describir las áreas en esta imagen que serán enlaces. Las etiquetas se utilizan para describir estas áreas. con un solo parámetro nombre, que especifica el nombre del mapa de referencia y luego se usa para referirse a este mapa.

Nuestra tarjeta debe estar conectada a nuestra imagen, para esto en la etiqueta necesitas agregar un parámetro usemap, cuyo valor es el nombre de nuestro mapa después del signo # (almohadilla):
Para describir áreas específicas dentro de las etiquetas se utilizan etiquetas ... Esta etiqueta tiene los siguientes parámetros:

• forma - define la forma del área, puede tomar los siguientes valores:
  • rect - área en forma de rectángulo,
  • circulo - un área en forma de círculo,
  • escuela politécnica - área en forma de polígono,
  • defecto - El área completa.
• cootds - establece las coordenadas de un área separada:
  • para rect Se establecen las coordenadas de las esquinas superior izquierda e inferior derecha del rectángulo,
  • para circulo se establecen las coordenadas del centro del círculo y el radio,
  • para escuela politécnica establece las coordenadas de los vértices del polígono en el orden deseado.
• href - define la dirección del enlace.
• objetivo - se utiliza cuando se utilizan marcos e indica el marco en el que cargar la página.
• alt : establece un texto alternativo para el área.

Tenemos tres áreas, por lo que habrá tres etiquetas : el primero es el área rectangular alrededor de la aspiradora, el segundo es el área rectangular alrededor de la lavadora, el tercero es alrededor del refrigerador.
Ahora necesitamos determinar las coordenadas de estas áreas. De hecho, este es el proceso que lleva más tiempo. En nuestro ejemplo, decidimos que las áreas serían rectangulares y nos facilitamos mucho la tarea, pero imagina cuántos puntos necesitas establecer, por ejemplo, para rodear un país en un mapa. Sin embargo, necesitamos establecer las coordenadas de las esquinas superior izquierda e inferior derecha de los tres rectángulos.

Para estos fines, generalmente se utiliza algún programa, por ejemplo, Image Ready, que tiene una herramienta especial para delinear áreas y automáticamente construye descripciones de estas áreas. El examen del funcionamiento de estos programas no está incluido en el curso HTML, por lo que aquí estableceremos las coordenadas "a ojo". Eche otro vistazo a nuestra imagen:

Nuestra imagen tiene 738 píxeles de ancho y 192 píxeles de alto. Dibujemos líneas a lo largo de los bordes de nuestras áreas y determinemos aproximadamente las coordenadas. Ahora estamos listos para agregar estos parámetros a nuestras etiquetas. .

Resultado:

Ahora nuestras áreas se han convertido en enlaces (si mueves el cursor del mouse, se convierte en una palma). No hay páginas frigoríficas en este sitio, por lo que los enlaces conducen a la misma página, pero si crea las páginas que desea, saltará al hacer clic en el área.

Esto concluye nuestras lecciones. Ahora está familiarizado con todas las funciones de HTML. Para consolidar sus habilidades, lea las dos lecciones Creación de un sitio web: diseño tabular.

Finalmente, debo decir que hay otros dos elementos geniales en HTML: etiquetas

y ... De hecho, son etiquetas muy importantes, pero para administrarlas sin CSS, considero que es solo una "perversión", por lo que se describen en detalle en

Recientemente, muchas páginas web utilizan los denominados mapas de imágenes para organizar enlaces. La implementación de esta función la proporciona el lenguaje HTML y le permite vincular enlaces de hipertexto a diferentes áreas de la imagen. Este enfoque es más claro que el uso de enlaces textuales ordinarios, ya que el usuario no puede leer la descripción verbal del enlace, pero comprender inmediatamente su significado en una imagen gráfica.

Incluso un usuario novato, deambulando por Internet, pronto se encontrará con un mapa de imágenes. En la Fig. 6.1 muestra la página web de una de las empresas informáticas más grandes de Rusia. El menú principal de esta página es un mapa de imágenes con enlaces relacionados.

Lanzamiento del conocido motor de búsqueda Yahoo! también da como resultado una página que contiene un mapa de imágenes. La parte superior de la imagen en la imagen contiene cuatro botones con la palabra "Yahoo!" en el medio. El cursor en la figura apunta al primero de estos botones, y la forma del cursor deja claro que este último apunta a un enlace cuya dirección es visible en la barra de estado del navegador. Los enlaces realizados por estos botones se realizan utilizando la tecnología de mapa de imágenes.

Sin embargo, no asuma que los mapas de imágenes deben usarse siempre que se requieran clics en los enlaces. Es necesario considerar si el uso de mapas de imágenes tiene sentido en este o aquel caso, después de sopesar todos los pros y contras. Este capítulo contiene toda la información que necesita saber sobre el uso de mapas de imágenes.

En este capítulo, aprenderá:

• ¿Qué es un mapa de imágenes y cómo funciona?
• Cómo crear un archivo de configuración de mapa de imagen
• Cómo crear enlaces en un documento HTML usando un mapa de imagen

Figura: 6.1.Un ejemplo de una página web en la que el menú principal se realiza mediante un mapa de imágenes

• ¿Qué principios deben seguirse al utilizar mapas de imágenes?
• ¿Cuáles son las características de los distintos formatos de archivo de configuración de mapas de imágenes?
• ¿Qué software debería utilizar para crear mapas de imágenes?

Conceptos básicos sobre el uso de mapas de imágenes

Los mapas de imágenes proporcionan una interfaz amigable para que los usuarios naveguen a otras páginas web. Para seguir dicho enlace, solo necesita seleccionar la ubicación deseada en la imagen y hacer clic. Tener una interfaz gráfica tan avanzada es una de las ventajas significativas de las páginas web sobre otros recursos de Internet. En lugar de menús basados \u200b\u200ben texto, similar a la interfaz del cliente Gopher, a los usuarios se les presentan representaciones gráficas de información (Figura 6.2).

Figura: 6.2. Visualización de enlaces (a páginas sobre las siete maravillas del mundo) utilizando un mapa de imágenes

Un mapa de imagen parece una imagen en línea normal, pero cuando selecciona un área de esta imagen con el cursor del mouse, cambiará a otras páginas. Normalmente, la imagen indica dónde hacer clic para ir a una página en particular. Hay varias formas de especificar los límites de las áreas que implementan varios enlaces. A menudo se utiliza un marco o algún otro separador.

Echemos un vistazo a los conceptos básicos asociados con el uso de mapas de imágenes.

Terminología

Mapa de imagen, mapa de imagen, mapa de área, mapa en el que se puede hacer clic, mapa sensible: todos estos términos en inglés se utilizan en la literatura de referencia para denotar la misma posibilidad, utilizando una imagen incrustada en un documento HTML para el que se definen puntos "calientes" (o activos), o áreas que tienen enlaces a diferentes URL. Describiremos esta característica con la frase "mapa-imagen", es decir, una combinación de varios componentes que aseguran la implementación de este concepto. Los componentes principales son: la imagen en sí, a la que llamaremos referencia para este mapa de imágenes; una descripción de la configuración de los puntos calientes; así como software relacionado.

Representación gráfica de un mapa de imágenes

Un mapa de imagen es en realidad un simple gráfico en línea en una página web. Estas imágenes pueden estar en cualquier formato válido (GIF o JPG). En este caso, el formato GIF puede utilizar un color transparente, así como un modo de intercalado de líneas. Para que la imagen se utilice como referencia para el mapa de imágenes, no se imponen formalmente restricciones adicionales.

Descripción de la configuración del mapa de imágenes

La configuración del mapa de imágenes se escribe en forma de texto plano, que, según el formato utilizado, se puede guardar en un archivo separado o formar parte de un documento HTML. La descripción de la configuración contiene coordenadas para cada uno de los puntos de acceso en la imagen, así como las URL asociadas con cada uno de esos puntos de acceso. Los puntos calientes pueden tener la forma de rectángulos, círculos y polígonos. Se permite cualquier combinación de estas formas. También se puede establecer un valor de URL único, que se define para el caso en el que el usuario hace clic dentro de la imagen, pero fuera de cualquiera de los puntos de acceso especificados. Las reglas específicas para registrar la configuración del área dependen de la opción de implementación seleccionada y se presentarán a continuación.

Opciones de implementación para mapas de imágenes

El concepto de un mapa de imágenes en las páginas web se puede implementar de dos formas diferentes: un mapa de imágenes del lado del servidor y un mapa de imágenes del lado del cliente. Este último nombre se utiliza a menudo como abreviatura CSIM. Históricamente, la versión del lado del servidor de mapas de imágenes apareció y se generalizó, lo que se implementó por primera vez en el navegador Mosaic. El lado del servidor permitió que se utilizaran las primeras versiones de los tres principales navegadores. La versión del servidor se puede implementar en dos formatos diferentes, que recibieron su nombre de los nombres de las organizaciones de desarrollo: NCSA y CERN.

Recientemente, más y más desarrollo está recibiendo la versión de cliente, que se implementó por primera vez en el navegador Microsoft Internet Explorer. A partir de la versión 2.0, esta opción también es compatible con el navegador Netscape. Esta opción tiene sus innegables ventajas y es cada vez más popular.

Ventajas y desventajas de los mapas de imágenes

Hay aspectos positivos y negativos en el uso de mapas de imágenes. La mayoría de ellos son de naturaleza estética, pero algunos también tienen aspectos técnicos. Para crear buenas páginas web, es importante comprender las ventajas y desventajas de los mapas de imágenes.

Los mapas de imágenes son más útiles en las siguientes situaciones:

• Para representar relaciones espaciales, como coordenadas geográficas, que serían difíciles de definir con botones o texto separados. Un ejemplo es un mapa de América del Norte, donde la selección de cada estado conduce a la transición a la página correspondiente.
• Como menú de nivel superior que aparece en cada página. La presencia de dicho menú brinda la oportunidad de ir a la sección del servidor de interés desde cualquier página y en cualquier momento. La creación de un menú gráfico común reducirá el tiempo de desarrollo.

Documentos HTML, porque se utilizará el mismo archivo de descripción de enlace. En lugar de enlazar a diferentes partes de la página de inicio en cada página, es suficiente consultar el menú general. Este menú también facilitará la navegación del usuario.

A pesar de que los mapas de imágenes se han vuelto extremadamente populares, está claro que no son una parte integral de las páginas web y no se utilizan en todas las páginas. Hay situaciones en las que no se deben utilizar mapas de imágenes.

Las desventajas de los mapas de imágenes incluyen las siguientes:

• A menos que se proporcione un menú de texto alternativo, no hay ayudas de navegación para los usuarios que no pueden descargar gráficos o que han desactivado su descarga.
• Los mapas de imágenes comparten una desventaja común inherente al uso de imágenes en páginas web, a saber, un aumento significativo en el tiempo de carga en comparación con los documentos de texto puro.
• Las imágenes mal diseñadas pueden resultar confusas. A veces es difícil identificar las áreas activas en la imagen. Esto es especialmente difícil de hacer en el lado del servidor. Al implementar la opción de cliente, la situación se simplifica, ya que es posible mover el mouse dentro de la imagen y seguir las direcciones de enlace que aparecen en la parte inferior de la ventana del navegador.
• Cuando se utilizan mapas de imágenes, el navegador no tiene la capacidad de codificar con colores los enlaces ya recorridos como lo hace con los enlaces de texto.

Implementación del lado del servidor de mapas de imágenes

El uso de mapas de imágenes en páginas web es algo más complejo que simplemente incrustar gráficos interesantes y vincularlos. Para implementar la versión del lado del servidor del mapa de imagen, el documento HTML debe estar ubicado en el servidor. También requiere que el servidor esté configurado para admitir scripts CGI (Common Gateway Interface) que manejan las solicitudes del navegador cuando se trabaja con un mapa de imágenes. Para cada mapa de imagen, se debe colocar en el servidor un archivo que describa la configuración de los puntos de acceso. Cuando se hace clic con el mouse dentro de la imagen, el navegador transmite las coordenadas de la ubicación en la que se hizo clic al servidor, que se refiere al archivo de configuración, que es esencialmente una tabla de búsqueda de puntos calientes. El resultado de la búsqueda se devuelve al navegador en forma de una URL o un mensaje de que no se encontraron puntos calientes que coincidan con la ubicación especificada en la imagen.

Para asegurar el funcionamiento de la tarjeta de imagen, es necesario indicar que esta imagen es referencia para la tarjeta. Esto se hace configurando el parámetro ISMAP en la etiqueta ... Además, el mapa de la imagen debe convertirse en un vínculo en la página web, al igual que usar la imagen completa como un solo vínculo.

Como recordatorio, las imágenes en línea se pueden usar como enlaces de hipertexto si se incluyen en la etiqueta<А>... Por ejemplo, para hacer que una imagen llamada Myimage.gif sea un puntero gráfico a un enlace de documento en el mismo directorio llamado exampie.html, debe escribir:

<А HREF=example.html >

Este código HTML le dice al servidor que cuando se hace clic en la imagen Mylmage.gif, se debe devolver al navegador un documento llamado example.html.

Parámetro ISMAP agregado a la etiqueta para el ejemplo dado, activa el mapa de imagen. En este caso, el enlace no se realiza a un documento específico, sino al archivo de configuración del mapa de imagen que contiene las coordenadas de todas las áreas de imagen activas. El archivo de configuración, generalmente con la extensión MAP, es analizado por un programa CGI en el servidor, junto con las coordenadas del punto de clic en la imagen. Luego, en lugar de la línea anterior, debe escribir:

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

El enlace en este ejemplo no es la dirección de otro documento HTML, sino un archivo de configuración de mapa de imagen que contiene coordenadas para cada área de imagen activa llamada Myimage.gif.

Nota

Orden de los parámetros de la etiqueta es arbitrario, sin embargo, el parámetro ISMAP suele colocarse en último lugar.

Un archivo de configuración de imagen de mapa es un archivo de texto sin formato que contiene información sobre los puntos de acceso de una imagen determinada. Cada imagen que se utilizará en el modo de mapa requiere un archivo de configuración independiente.

Consejo

Se requiere un archivo de configuración separado para cada mapa de imagen. Establezca como regla guardar el archivo de configuración en el mismo directorio y con el mismo nombre que la imagen asociada. Por ejemplo: main_menu.gif y main menu.map.

Hay dos formatos de archivo de configuración de mapas de imágenes desarrollados por CERN y NCSA y nombrados por estas organizaciones. Ambos formatos contienen la misma información, pero la representan de manera diferente. En ambos casos, se utilizan los mismos tipos de áreas, que se discutirán a continuación. Al desarrollar mapas de imágenes para su uso en un servidor específico, es necesario obtener información del administrador del sistema sobre el método de soporte de mapas de imágenes aceptado en este servidor.

Ambos formatos utilizan hotspots en forma de rectángulos, círculos y polígonos, y se puede establecer una región denominada por defecto, que caracteriza todos los puntos de la región que no pertenecen a ninguno de los hotspots. Si el usuario hace clic dentro de la imagen, pero fuera de cualquiera de los puntos de acceso especificados, se tomará como URL el valor especificado por el tipo predeterminado.

Para cada área, el archivo de configuración registra una URL que se devolverá al usuario cuando se produzca un clic dentro de esa área. Esta dirección se puede escribir tanto en forma relativa como absoluta. Tenga en cuenta que la URL relativa debe ser relativa a la ubicación del archivo de configuración, no al archivo de imagen. La lista de puntos calientes en el archivo de configuración se lee comenzando desde la primera línea. Si dos áreas se superponen, entonces se implementa el enlace, cuya descripción del alcance aparece primero en el archivo de configuración.

Consejo

Se recomienda establecer siempre el enlace predeterminado en el archivo de configuración. El enlace predeterminado se implementará para las áreas de la imagen que no estén activas. En el caso más simple, la URL predeterminada puede simplemente apuntar a una página con información útil sobre el uso de la tarjeta.

Formato CERN

El CERN es un centro de investigación europeo con una amplia gama de temas de investigación. Fue aquí donde se desarrolló el concepto del sistema World Wide Web, que fue el impulso para todos los desarrollos en el campo de la WWW. El CERN puede considerarse legítimamente el lugar de nacimiento de la Web. Cuando se hizo necesario desarrollar la estructura de los archivos de configuración del mapa de imágenes, en el CERN se propuso el siguiente formato:

tipo de área coordenadas url

Los pares de coordenadas X e Y están separados por comas y entre paréntesis. El formato CERN no permite el uso de comentarios para aclarar enlaces relacionados con un área en particular. Se pueden utilizar los siguientes tipos de áreas: rect, círculo, poli y predeterminado. Este formato permite escribir los nombres de los tipos de áreas de dos formas: tanto en forma abreviada como completa. Junto con los nombres de tipo dados, se pueden usar los nombres rectangle, circ y polygon.

A continuación se muestra un ejemplo de registro de información sobre áreas en una imagen de mapa en formato CERN:

rect (56,47) (357,265) http://www.anywhere.com/

circ (366,147) 109 http://www.anywhere.com/

polígono (534.62) (699.62) (698.236) (626.261) (534.235) (534.62)

http://www.anywhere.com/

Formato NCSA

El Centro Nacional de Aplicaciones de Supercomputación (NCSA) de la Universidad de Illinois también ha realizado importantes contribuciones a la Web. El primer navegador gráfico popular, el programa Mosaic, se creó aquí. La NCSA propuso un formato de archivo de configuración que difiere en notación del formato CERN. Este formato se ve así:

area_type url coordenadas

Se pueden utilizar los siguientes tipos de áreas: rect, círculo, poli, predeterminado y punto.

Las coordenadas X e Y están separadas por comas, pero no entre paréntesis. Se permiten líneas de comentarios en este formato. Cualquier línea que comience con el carácter # será tratada como un comentario y el intérprete ignorará su contenido.

El formato NCSA ofrece una forma ligeramente diferente de definir regiones circulares (en comparación con el formato CERN y la opción del lado del cliente que se analiza a continuación). El área circular se especifica mediante las coordenadas de dos puntos: el centro y cualquier punto que se encuentre en el círculo.

Nota

El formato NCSA acepta el tipo de área de puntos. Este tipo de área no se aplica en formato CERN o cuando se utilizan mapas de imágenes del lado del cliente. La intención de los creadores del formato era que en presencia de una serie de regiones de puntos, el clic del ratón activara el enlace que estaba más cerca que los demás. Sin embargo, la presencia de este tipo de área, en esencia, entra en conflicto con el tipo de área predeterminada, ya que cuando se usan el punto y las áreas predeterminadas al mismo tiempo, la implementación de la referencia definida por el tipo de punto es posible solo cuando el punto exacto se golpea con el mouse. Esto es bastante difícil y es poco probable que cree un entorno cómodo al trabajar con un documento de este tipo. Actualmente, el tipo de punto prácticamente no se utiliza y la versión de cliente de mapas de imágenes se está desarrollando cada vez más.

A continuación, se muestra un ejemplo de cómo escribir un archivo de configuración en formato NCSA:

# Un ejemplo de escritura de un archivo de configuración

rect http://www.anywhere.com/ 56.47 357.265

círculo http://www.anywhere.com/ 366.147 366.256

poli http://www.anywhere.com/ 534.62 699.62 698.236 626.261 534.235 534.62

Opción de cliente de mapa de imágenes

La versión del lado del cliente del mapa de imágenes le permite colocar toda la información sobre la configuración del mapa en un archivo HTML, que contiene una imagen. En el caso de utilizar la versión del servidor, el navegador envía una solicitud al servidor para obtener la dirección del enlace seleccionado y espera una respuesta con la información requerida. Esto puede requerir tiempos de espera adicionales. Con la opción de cliente, el número de solicitudes al servidor disminuye y la velocidad de acceso a la información aumenta. En esta versión, no es necesario ponerse en contacto con el servidor para editar la configuración del mapa, por lo que todo el trabajo para crear el mapa de imagen se puede hacer localmente, simultáneamente con la edición del archivo HTML. A diferencia de la versión del servidor, que requería un archivo de configuración independiente para cada mapa de imagen, en esta versión la configuración del mapa se puede ubicar directamente en el mismo documento HTML en el que se especifica la referencia a la imagen de referencia. La mayoría de las veces, esto es exactamente lo que hacen, aunque está permitido guardar la configuración del mapa en un archivo separado y darle un enlace.

Para indicar que la imagen en línea es la referencia para el mapa, use el parámetro de etiqueta USEMAP ... El valor del parámetro USEMAP es un enlace a la descripción de la configuración del mapa.

Nota

El navegador Netscape no permite un archivo separado para describir la configuración de la tarjeta.

Por ejemplo:

En este ejemplo, la imagen almacenada en un archivo llamado l ogo.gif es la referencia para el mapa de imágenes del lado del cliente.

Las descripciones de la configuración del hotspot deben ubicarse en el mismo archivo que esta línea de código HTML y el logotipo con nombre para este ejemplo.

Etiqueta<МАР>

Se utiliza una etiqueta especial para describir la configuración de las áreas del mapa de imágenes.<МАР>cuyo único parámetro es NAME. El valor del parámetro NAME especifica el nombre que debe coincidir con el nombre en USEMAP. Etiqueta<МАР> requiere una etiqueta de cierre... Dentro de este par de etiquetas, se deben ubicar las descripciones de las áreas activas del mapa, para lo cual se usa una etiqueta especial .

Etiqueta

Cada etiqueta especifica un punto de acceso. No se requiere etiqueta final. Los puntos calientes pueden superponerse. Si un punto hace referencia simultáneamente a varias áreas activas, entonces se implementará el enlace, cuya descripción se ubica primero en la lista de áreas.

Parámetros de etiqueta son SHAPE, COORDS, HREF, NOHREF, TARGET y ALT. Consideremos el propósito de estos parámetros.

Parámetro SHAPE

El parámetro SHAPE determina la forma del hotspot. Los valores válidos son rect, circle, poly, default. Estos valores definen áreas en forma de rectángulo, círculo, polígono. El último valor, predeterminado, define todos los puntos de la región. Si se omite SHAPE, el valor predeterminado es rect, que es un área rectangular.

Advertencia

No confunda el alcance predeterminado, que describe todos los píxeles de la imagen, y el parámetro SHAPE predeterminado, que es rect.

Nota

A diferencia de la versión del servidor, donde el área predeterminada define todos los puntos de la imagen que no pertenecen a ningún área activa, para la versión cliente, el área predeterminada define todos los puntos de la imagen en general. Por lo tanto, en este caso, la descripción del área predeterminada debe ser la última en la lista de áreas calientes. Si, por ejemplo, se pone primero la descripción del área predeterminada, entonces el enlace definido por esta área siempre se implementará para la versión del cliente, y todos los demás enlaces serán ignorados (así es como se implementa este tipo de área en Netscape). Para el lado del servidor, la ubicación de la descripción del alcance predeterminado es irrelevante. Esta diferencia se incluye en los ejemplos al final del capítulo.

Consejo

Tenga en cuenta también que no todos los navegadores admiten el tipo de alcance predeterminado. En particular, Microsoft Internet Explorer no permite este tipo de región en absoluto. Por lo tanto, en lugar de un área del tipo predeterminado, podemos recomendar establecer un área rectangular con dimensiones iguales a las dimensiones de la imagen completa. Naturalmente, esta región debería describirse en último lugar. Esto es exactamente lo que hacen algunos programas de edición de imágenes de mapas, que se analizarán a continuación.

Parámetro COORDES

El parámetro COORDS establece las coordenadas de un área activa separada. El valor del parámetro es una lista separada por comas de coordenadas de puntos que definen el punto caliente. Las coordenadas se escriben como números enteros no negativos. El origen se encuentra en la esquina superior izquierda de la imagen, lo que corresponde a un valor de 0.0. El primer número define la coordenada horizontal, el segundo - vertical. La lista de coordenadas depende del tipo de área.

Para un área de tipo rect, se especifican las coordenadas de las esquinas superior izquierda e inferior derecha del rectángulo.

Para un área de tipo círculo, se especifican tres números: las coordenadas del centro del círculo y el radio.

Para un área de tipo poli, las coordenadas de los vértices del polígono se establecen en el orden deseado. Tenga en cuenta que el último punto de la lista de coordenadas no tiene por qué ser el mismo que el primero. Si no coinciden, al interpretar los datos para la forma de esa región, el navegador conectará automáticamente el último punto al primero. Los diferentes editores de mapas de imágenes funcionan de manera diferente a este respecto: algunos agregan el primer punto al final de la lista, mientras que otros no. Las restricciones cuantitativas sobre el número de picos son bastante grandes y cubren casi todas las necesidades imaginables. Todos los navegadores principales manejan al menos un polígono con 100 vértices con confianza. Existe una limitación debido al propio lenguaje HTML, según la cual la lista no puede contener más de 1024 valores. El polígono puede no ser convexo.

El alcance predeterminado no requiere especificar coordenadas.

Parámetros HREF y NOHREF

Las opciones HREF y NOHREF son mutuamente excluyentes. Si no se especifica ninguno de estos parámetros, entonces no hay referencia para esta área. Lo mismo está definido explícitamente por el parámetro NOHREF, que no requiere un valor. El parámetro HREF define la dirección del enlace, que se puede escribir en forma absoluta o relativa. Las reglas de grabación coinciden completamente con las reglas para grabar enlaces en una etiqueta.<А>.

El parámetro NOHREF es útil para excluir parte del hotspot. Por ejemplo, suponga que desea crear un punto de acceso en forma de anillo. Este tipo de región no se incluye en la lista de posibles regiones, pero se puede implementar definiendo dos regiones circulares. Para hacer esto, primero configure el área con un radio más pequeño y especifique NOHREF como parámetro. A continuación, debe definir un área con un radio mayor centrado en el mismo punto y especificar el enlace deseado. Entonces el área dentro del anillo, definida por dos círculos de diferentes radios, tendrá la referencia necesaria. Utilizar un enfoque basado en áreas superpuestas permitirá la construcción de áreas de formas muy diversas.

Parámetro TARGET

El parámetro TARGET se utiliza cuando se trabaja con marcos. Su propósito es especificar el nombre del marco en el que se colocará el documento cargado por este enlace. Para obtener más información sobre el uso de este parámetro, consulte el capítulo sobre cómo trabajar con marcos.

Parámetro ALT

El parámetro ALT le permite escribir texto alternativo para cada uno de los puntos calientes de la imagen. Como tal, este texto solo actuará como comentario para el creador del documento. Si el texto alternativo grabado para toda la imagen (en la etiqueta ), sirve para mostrarlo en la pantalla cuando se trabaja con la carga de imágenes desactivada, luego el texto alternativo para las áreas activas nunca aparecerá en la pantalla.

A continuación, se muestra un ejemplo de definición de áreas de diferentes tipos:

<МАР NAME="logo">

!}

HREF \u003d "p.htm" ALT \u003d "(! LANG: Polígono"> !}

Este fragmento de código se encuentra en un archivo HTML. A menudo, todas las descripciones de mapas de imágenes de un documento se reúnen y se colocan al principio de una sección. documento. Este enfoque está cerca de los programadores, quienes generalmente, al escribir programas, separan la parte descriptiva del programa y la ejecutable, lo que facilita la comprensión del código escrito, y en ocasiones está determinado por los requisitos del compilador.

Combinación de opciones de cliente y servidor

Está permitido utilizar una versión combinada, en la que se definen los parámetros USEMAP e ISMAP para la misma imagen, lo que implica el uso de esta imagen como referencia tanto para la versión cliente como para la del servidor. USEMAP es dominante. Esto significa que un navegador que admita la versión del cliente usará USEMAP, ignorando el parámetro ISMAP. Los navegadores que no admitan la versión del cliente y no entiendan el propósito del parámetro USEMAP, de acuerdo con las reglas generales de HTML, ignorarán su presencia e implementarán la versión del servidor cuando detecten la presencia del parámetro ISMAP. La opción combinada es más confiable, pero requiere datos de configuración de área para ambas opciones. Hoy en día, la necesidad de usar la opción combinada está disminuyendo ya que todos los navegadores principales admiten la opción de cliente. Sin embargo, las páginas de inicio de Netscape con las que probablemente se encontrará cualquier usuario del navegador Netscape están hechas en una combinación.

A continuación, se muestra un ejemplo de una opción combinada:

<А HREF="http://www.anywhere.com/testmap/logo.map">

Nota

El parámetro USEMAP también domina el enlace definido por la etiqueta<А>... Entonces, si la imagen utilizada para implementar el concepto de un mapa de imágenes en la versión del cliente está escrita dentro del alcance de la etiqueta<А HREF>luego, los navegadores que admitan la opción del lado del cliente ignorarán el enlace identificado por la última etiqueta. Por ejemplo, suponga que tiene el siguiente fragmento:

<А HREF=NoMaps.htm> .

Por un lado, toda la imagen es un enlace a un documento llamado NoMaps.htm. Por otro lado, la presencia del parámetro USEMAP define esta imagen como referencia para el mapa de imagen correspondiente. El enlace al documento NoMaps.htm se ignorará debido a la presencia del parámetro USEMAP e independientemente de otros factores.

Características del uso de mapas de imágenes

Observemos algunas peculiaridades en el uso de mapas de imágenes en la versión cliente. Cuando el usuario mueve el mouse dentro de la imagen del lado del cliente, la URL correspondiente se muestra en la barra de estado en la parte inferior del navegador Netscape. En la versión del servidor, la URL no se muestra porque esta información está alojada en el servidor y no está disponible hasta que el usuario hace clic en la imagen. La primera opción es más informativa, ya que el usuario ve las URL de los enlaces, y también puede determinar los lugares de la imagen sin enlaces. En la versión del servidor, se muestran números que son coordenadas relativas del mouse en la imagen y no brindan ninguna información sobre los enlaces y su presencia.

Ayudas a la navegación alternativas

Si bien el uso de mapas de imágenes se ha convertido en algo común, tenga en cuenta que no todos los usuarios de la Web todavía pueden usar gráficos o desean desactivar la carga de imágenes para reducir el tiempo de transferencia de archivos. Por lo tanto, es necesario proporcionarles algún otro medio alternativo de navegación en la página. De lo contrario, los usuarios no podrán encontrar en la página en absoluto y, en consecuencia, implementar esos enlaces que están definidos solo por el mapa de imágenes.

Alternativamente, puede crear una sección separada con descripciones textuales de los enlaces y las URL correspondientes. También puede crear un vínculo a un menú de texto que tenga los mismos vínculos que el mapa de imágenes. Cualquiera que sea el enfoque que elija, debe asegurarse de que todos los enlaces estén disponibles para el modo de texto del navegador.

Demos un ejemplo de un documento realmente existente, que resuelve estos problemas. En una de las páginas de la conocida empresa Hewlett-Packard, se muestra un fragmento en el que hay una imagen de mapa. En el medio de la página hay una lista de diez tipos diferentes de equipos, cada uno con un enlace al documento correspondiente. De hecho, hay una imagen en la página, que es la imagen de referencia para el mapa. En esta imagen, diez zonas rectangulares están resaltadas como puntos de acceso.

Si carga esta página con el modo de carga de imágenes desactivado, verá una imagen en la que, en lugar de un mapa de imágenes, solo hay un pequeño icono que muestra la ubicación de la imagen y. texto que se estableció como una alternativa para toda la imagen dada. Obviamente, no podrá utilizar los enlaces aquí. Para solucionar este problema, debajo de la imagen hay un menú de texto regular, que repite completamente la lista mostrada en la imagen, con los enlaces correspondientes. Por lo tanto, si la carga de imágenes está deshabilitada, el usuario aún podrá implementar las transiciones necesarias en los enlaces usando el menú de texto duplicado. Si se carga una imagen, el menú de texto solo duplica las opciones para seleccionar enlaces.

Herramientas de imagen

La creación de mapas de imágenes requiere dos pasos: preparación de una imagen de referencia, en la que se definirán los puntos calientes más adelante, y desarrollo de un archivo de configuración que describa los parámetros geométricos de los puntos calientes. La preparación de una imagen, que será la base de un mapa de imágenes, no es diferente del trabajo de preparar imágenes ordinarias para incrustarlas en páginas web. Para hacer esto, puede usar cualquier editor de gráficos o usar una imagen preparada.

En el segundo paso, es necesario marcar las áreas activas en la imagen y unirlas con las direcciones de enlace correspondientes. La preparación del archivo de configuración es el paso más difícil en la creación de mapas de imágenes. En principio, es posible definir manualmente los límites de las áreas activas en la imagen. Por ejemplo, al trabajar en un editor gráfico, puede marcar puntos individuales, escribir sus coordenadas y luego crear un archivo que describa los parámetros geométricos de las áreas seleccionadas. Sin embargo, este enfoque es extremadamente inconveniente y engorroso.

Existen varios programas para automatizar el proceso de marcar áreas en una imagen, la mayoría de los cuales son muy similares entre sí. Le permiten crear y modificar archivos de configuración trabajando directamente con la imagen en la pantalla. La mayoría de los programas son utilidades independientes que funcionan de forma independiente y, de hecho, son una adición a los editores de HTML. Estos programas le permiten guardar el archivo de configuración generado en el portapapeles de Windows o en un archivo en el disco. En el primer caso, una opción típica es el trabajo conjunto del programa para editar la imagen del mapa y algún tipo de editor HTML o un editor de texto normal. Si el programa le permite guardar el archivo de configuración en el disco, entonces se puede usar completamente fuera de línea. Todos los programas le permiten marcar áreas en la imagen de tres tipos principales: rect, círculo y poli. Algunos editores admiten el tipo predeterminado. Quizás el único criterio para elegir un programa para editar imágenes de mapas es su facilidad de uso, ya que en términos de propiedades funcionales todos los programas son muy similares. Si la interfaz del programa le parece incómoda, puede negarse a usarla y elegir otra.

Consideremos algunos de los programas existentes.

Programa MapEdit

Uno de los programas de edición de archivos de configuración más simples y conocidos es la utilidad MapEdit desarrollada por Thomas Boutell. Este programa existe desde hace varios años y se ha implementado para varias plataformas. En particular, existen versiones para Windows 3.xy Windows 95/98 / NT. Como ocurre con la mayoría de los programas, existen varias versiones de esta utilidad. Actualmente, la última versión disponible para Windows 95/98 / NT es la versión 2.6 (septiembre de 1999). Se puede obtener información sobre el programa en:

http: //www.boutell.cora/mapedit/

MapEdit es shareware y tiene un período de evaluación de 30 días, después del cual es necesario registrarse. El programa es de tamaño pequeño: el kit de distribución ocupa aproximadamente 300 KB y, al mismo tiempo, tiene casi todas las características necesarias.

El programa permite editar archivos de configuración tanto para la versión del servidor (en los formatos NCSA y CERN) como para el cliente. Es posible crear visualmente puntos de acceso en forma de rectángulos, círculos y polígonos, así como definir una dirección de enlace para el área predeterminada.

Consideremos brevemente las principales características de este programa. Después de iniciar MapEdit, se muestra la ventana principal que contiene una pantalla de presentación (Fig. 6.3) y un menú. Es posible editar archivos existentes para las versiones de servidor y cliente de mapas de imágenes. También es posible crear un nuevo archivo de configuración, pero esto se aplica solo a la versión del servidor. La versión del cliente requiere un archivo HTML de origen con enlaces a imágenes incrustadas que se utilizarán como referencia para las imágenes de mapas.

Nota

La imposibilidad de crear un nuevo archivo HTML con MapEdit se puede solucionar fácilmente. Para hacer esto, ejecute el programa en el modo de creación de archivos en uno de los formatos del lado del servidor (NCSA y CERN), realice todas las acciones necesarias y luego guarde los resultados en el modo Guardar como, especificando el formato del Mapa del lado del cliente. Se creará un archivo HTML, que luego se puede usar como un fragmento listo para usar de un documento HTML.

Digamos que necesitamos crear un nuevo archivo de configuración para la versión de servidor de mapas de imágenes. Seleccione el elemento Abrir / Crear mapa del menú

Expediente. Aparecerá un cuadro de diálogo (Fig.6.4), en el que se debe especificar el nombre del archivo de configuración a crear (por ejemplo, Blazons.map), especificar el archivo de imagen existente y el formato del archivo a crear (NCSA o CERN). El archivo de imagen puede estar en formato GIF, JPG o PNG.

Figura: 6. 3 . Pantalla de presentación de MapEdit

Figura: 6. 4 . Cuadro de diálogo Abrir / Crear mapa para crear un archivo de configuración

Nota

Muchos de los intérpretes de archivos de configuración del lado del servidor requieren que el archivo tenga la extensión MAP. Le recomendamos que se ciña siempre a esta regla.

El programa cargará el archivo de imagen seleccionado en el que será posible marcar las áreas activas (Fig. 6.5).

Para hacer esto, debe seleccionar la forma del área activa: un rectángulo, círculo o rectángulo haciendo clic en el icono correspondiente o seleccionando el elemento deseado en el menú Herramientas (Fig. 6.6).

Las acciones adicionales se realizan directamente en la imagen marcando puntos con el mouse. Para un área rectangular, marque las esquinas superior izquierda e inferior derecha, para un área circular - el centro y uno de los puntos en el círculo, para el polígono se establecen sus vértices. Por ejemplo, en la Fig. 6.5 muestra el caso cuando tres regiones activas de diferentes formas ya están marcadas en la imagen. Tenga en cuenta que las líneas que delimitan las áreas activas sirven solo para su visualización cuando se trabaja en el editor y no cambian el archivo de imagen de ninguna manera. La imagen en este ejemplo contiene esencialmente tres imágenes separadas (se muestran los escudos de armas de las ciudades de San Petersburgo, Tomsk y Yakutsk), lo que generalmente no es típico de imágenes realistas. Sin embargo, para imágenes que contienen, por ejemplo, un conjunto de botones de control, esta situación es bastante típica.

Figura: 6. 5 . Imagen con áreas activas marcadas de varios tipos

Figura: 6. 6 . Menú de herramientas

Figura: 6. 7 . Cuadro de diálogo URL del objeto para especificar la URL y el comentario opcional

Después de marcar cualquiera de las áreas, debe configurar la dirección del enlace correspondiente a esta área, así como la información de comentarios (Fig. 6.7). Puede establecer la dirección de enlace predeterminada para el área, que se implementará para una parte del área de la imagen que no está incluida en ninguna de las áreas activas (Fig. 6.8).

Después de marcar las regiones, puede verificar o cambiar visualmente los puntos de acceso creados utilizando el elemento Prueba del menú Editar. El último paso del trabajo es guardar los resultados como un archivo de configuración (elemento Guardar del menú Archivo). También puede utilizar el elemento Guardar como, en el que puede establecer el formato de archivo requerido para guardar (Fig. 6.9).

Figura: 6. 8 . Cuadro de diálogo de URL predeterminada para establecer la URL del reino predeterminado

Figura: 6. 9 . Cuadro de diálogo Guardar como comando

Nota

Las versiones anteriores de MapEdit contenían un pequeño error relacionado con la configuración del formato del archivo de configuración guardado. Si se especificó el formato CERN al crear el archivo, al guardar los datos en el modo Guardar, el archivo aún se guardará en el formato NCSA. Es posible crear un archivo CERN solo cuando se usa el modo Guardar como con el formato requerido especificado.

Para este ejemplo, se creará un archivo llamado Blazons.map que contiene la siguiente información (formato NCSA):

# Escudo de la ciudad de Tomsk

rect www.ifmo.ru/sergeev/tomsk.htm 35.58 187.244

# Escudo de la ciudad de Yakutsk

círculo www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150

# Escudo de la ciudad de San Petersburgo

poli www.ifmo.ru/sergeev/Spb.htm 537.61 700.61 700.230 618.256 537.231

Los mismos datos guardados por el editor en formato CERN se verán así:

rect (35.58) (187.244) www.ifmo.ru/sergeev/tomsk.htm círculo (364.150) 104 www.ifmo.ru/sergeev/jakutsk.htm poli (537.61) (700.61) (700.230) (618,256) (537,231) www.ifmo.ru/sergeev/Spb.htm

Tenga en cuenta que los comentarios en este formato no están permitidos, por lo que esta información se perderá cuando se guarde el archivo.

Considere la tarea de crear una versión de cliente de un mapa de imágenes. Para resolver este problema, debe tener un archivo HTML de origen que contenga al menos una imagen incrustada. Este archivo fuente puede ser creado previamente por cualquier editor de texto o editor HTML especial. Deje que haya un archivo llamado CSIM.HTM que contenga el siguiente código:

Este archivo debe abrirse en el editor MapEdit (Fig. 6.10). A diferencia de la variante en la que se creó el archivo de configuración, no es necesario especificar el nombre del archivo con la imagen en el elemento de menú Abrir / Crear mapa.

Figura: 6.1 0 . Cuadro de diálogo Abrir / Crear mapa para abrir un archivo HTML existente

Figura: 6.1 1 . Seleccionar cuadro de diálogo de imagen en línea

Después de abrir el archivo HTML de origen, el editor mostrará un cuadro de diálogo con una lista de todas las imágenes incrustadas, de la cual debe seleccionar la que desee (Fig. 6.11). Por supuesto, el archivo con la imagen seleccionada debe existir.

El trabajo posterior en el marcado de áreas activas es completamente idéntico al caso anterior. Después de guardar los resultados del marcado, el archivo original se modificará y, para el ejemplo dado, se verá así:

href \u003d "tomsk.htm"\u003e

href \u003d "jakutsk.htm"\u003e

coords \u003d "537,61,700,61, 700, 230, 618, 256, 537,231" href \u003d "Spb.htm"\u003e

Tenga en cuenta que el editor asigna automáticamente un nombre para la descripción del mapa de imágenes, que es el mismo que el nombre de archivo de la imagen de referencia. Para este ejemplo, el archivo de imagen se llamó Blazons.gif, por lo que el parámetro de nombre de la etiqueta<тар> se le asignó el valor "Blasones".

Nota

El editor MapEdit no funciona correctamente con los caracteres del alfabeto ruso. Algunas de las letras rusas desaparecen cuando se guarda el archivo y aparecen espacios en su lugar. La forma más sencilla de salir de esta situación es agregar texto en ruso después de terminar el trabajo en el editor.

Mapa ESTO!

Otra utilidad para crear y editar archivos de configuración de mapas de imágenes es el programa Map THIS !, cuya información se puede obtener en:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

Trabajar con este programa es similar en ideología al programa MapEdit. La base para trabajar con el programa es el diseño visual de áreas activas con el guardado adicional de los resultados en un archivo en uno de los formatos seleccionados. El editor admite mapas de imágenes del lado del servidor (NCSA y CERN) y del lado del cliente. Las imágenes se pueden cargar desde archivos GIF y JPG.

Estos son ejemplos de archivos de configuración creados por este programa. Para el ejemplo dado en la sección anterior, el archivo guardado en formato NCSA se verá así:

# $ MTIMFH

# $ -: archivo de mapa de imagen creado por Map THIS!

# $ -: Mapee ESTO! editor de mapas de imágenes gratuito por Todd C. Wilson

# $ -: No edite líneas que comiencen con "# $"

# $ VERSIÓN: 1.30

# $ TITLE: Blasones

# $ DESCRIPCIÓN: mapa de imágenes del lado del servidor

# $ FECHA: Mar 14 de septiembre 12:10:42 1999

# $ RUTA: С: \\ Archivos de programa \\ Mapthis \\

# $ GIF: Blazons.gif

# $ FORMATO: ncsa

# $ EOH

default default.htm

# Escudo de la ciudad de Tomsk

rect Tomsk.htm 33.60 191.246

# Escudo de la ciudad de Yakutsk

círculo Jakutsk.htm 366.147 366.256

# Escudo de la ciudad de San Petersburgo

poly Spb.htm 534.62 699.62 698.236 626.261 534.235 534.62

A diferencia del programa MapEdit, este editor escribe una gran cantidad de información de comentarios en el archivo de salida, incluida información breve sobre el programa en sí, la fecha en que se creó el archivo, etc. Al mismo tiempo, después del símbolo # que indica el comienzo de la línea de comentarios, el editor agrega el símbolo $ para las líneas de comentarios, creado por el propio editor. Preste atención a la cuarta línea del código anterior, que contiene una solicitud para no editar los comentarios insertados por el editor.

El mismo ejemplo guardado en formato CERN sería:

rect (4096,4096) (4096,4096) mt: # $ MTIMFH

rect (4096,4096) (4096,4096) mt: # $ -: Archivo de mapa de imagen creado por Map THIS!

rect (4096,4096) (4096,4096) mt: # $ -: Map ESTO! editor de mapas de imágenes gratis

por Todd C. Wilson

rect (4096,4096) (4096,4096) mt: # $ -: Por favor, no edite las líneas que comienzan

con "# $"

rect (4096,4096) (4096,4096) mt: # $ VERSION: 1.30

rect (4096,4096) (4096,4096) mt: # $ TITLE: Blasones

rect (4096,4096) (4096,4096) mt: # $ DESCRIPCIÓN: Variante de servidor

mapas de imágenes

rect (4096,4096) (4096,4096) mt: # $

rect (4096,4096) (4096,4096) mt: # $ FECHA: Mar 14 de septiembre 12:10:42 1999

rect (4096,4096) (4096,4096) mt: # $ RUTA: C: \\ Archivos de programa \\ Mapthis \\

rect (4096,4096) (4096,4096) mt: # $ GIF: Blazons.gif

rect (4096,4096) (4096,4096) mt: # $ FORMATO: cern

rect (4096,4096) (4096,4096) mt: # $ EOH

default default.htm

rect (4096,4096) (4096,4096) mt: # Escudo de la ciudad de Tomsk

rectángulo (33,60) (191,246) Tomsk.htm

rect (4096,4096) (4096,4096) mt: # Escudo de la ciudad de Yakutsk

circ (366,147) 109 Jakutsk.htm

rect (4096,4096) (4096,4096) mt: # Escudo de San Petersburgo

polígono (534.62) (699.62) (698.236) (626.261) (534.235) (534.62) Spb.htm

Como puede ver en el código anterior, el editor usa un truco algo artificial para guardar comentarios, tanto proporcionados por el usuario como generados por el programa. Recuerde que el formato CERN no permite establecer líneas de comentarios, por lo que el editor crea una línea como

rect (4096,4096) (4096,4096),

al final del cual puede colocar cualquier texto. En esencia, dicha línea describe un rectángulo que obviamente está ubicado fuera de la pantalla, por lo que su presencia no importa. Por supuesto, esto hace que el texto del archivo de configuración sea mucho más engorroso e incómodo para la lectura, lo que, sin embargo, no interfiere con el trabajo de los programas. Se puede adoptar esta técnica de guardar comentarios.

El mismo ejemplo guardado como un archivo HTML (para la versión de cliente de mapas de imágenes) se verá así:

<МАР NAME="Blazons">

ALT \u003d "(! LANG: Escudo de la ciudad de Tomsk"> !}

ALT \u003d "(! LANG: Escudo de la ciudad de Yakutsk"> !}

HREF \u003d "Spb.htm" ALT \u003d "(! LANG: Escudo de San Petersburgo"> !}

Aquí, a diferencia del programa MapEdit, el nombre del mapa de la imagen debe especificarse manualmente, por lo que puede que no sea el mismo que el nombre del archivo con la imagen de referencia.

Programa CrossEye

Editor de archivos de configuración CrossEye, creado por la famosa empresa australiana Sausage Software. Este programa será recibido con alegría por los fanáticos del popular editor HTML HotDog, ya que fue creado por la misma compañía y tiene una interfaz muy atractiva y divertida.

Puede obtener información sobre el paquete CrossEye en:

http://www.sausage.com.au.

Las características distintivas del programa son un tamaño bastante grande del kit de distribución (aproximadamente 2,5 MB), así como un período corto de tiempo (14 días), durante el cual puede usarlo en el modo de evaluación. El gran tamaño de los programas es típico de todo el software creado por Sausage Software, lo que, aparentemente, se debe a la elección de las herramientas utilizadas para el desarrollo (Visual Basic).

Desafortunadamente, el programa no tiene varias propiedades requeridas. Por ejemplo, no es posible leer un archivo HTML existente, por lo que no es posible editar un mapa de imagen existente que se creó anteriormente. También es imposible guardar los resultados del trabajo directamente en el archivo HTML. Guardar los resultados solo es posible en un archivo con una extensión especial EYE, que tiene una forma binaria y se puede usar más adelante solo en este editor. El código HTML generado se escribe en el portapapeles de Windows, desde donde se puede copiar a cualquier editor de texto.

Como en todos los editores descritos anteriormente, la creación y edición de puntos calientes se realiza directamente en la imagen, pero la imagen se carga en una ventana, cuyo tamaño, por alguna razón desconocida, no se puede cambiar. Si la imagen es más grande que el tamaño de la ventana, puede utilizar el desplazamiento para ver la imagen, pero resulta imposible establecer el área activa fuera de la ventana gráfica.

Para la versión del lado del cliente del mapa de imágenes, el editor no solicita en absoluto que establezca la URL de alcance predeterminada. Es posible que esto se haya hecho a propósito, ya que no todos los navegadores admiten el tipo de alcance predeterminado. Sin embargo, los editores descritos anteriormente resuelven este problema con bastante elegancia, reemplazando automáticamente el área predeterminada con un área rectangular con dimensiones iguales a las dimensiones de la imagen.

En cierto sentido, las desventajas se compensan con propiedades adicionales independientes del editor. En particular, puede descubrir que el nombre del loro, que se ve en la esquina superior derecha de la figura anterior, es Polly. Es muy hablador, y los usuarios que trabajan en una computadora equipada con una tarjeta de sonido escucharán ocasionalmente los gritos de un loro, que, sin embargo, no tienen nada que ver con las acciones que se realizan. Y en uno de los cuadros de diálogo de configuración del editor hay incluso un elemento especial que le permite silenciar al pobre loro. Este es un ejemplo de un servicio de primera categoría. Al parecer, debido a las propiedades enumeradas, la calificación de este editor se estima http://www.tucows.com, es muy alto, lo que no se puede decir de los dos programas descritos anteriormente.

En última instancia, la elección del editor para crear mapas de imágenes queda en manos del usuario.

pros

• Los mapas de imágenes le permiten definir cualquier forma para el área de referencia, lo cual es especialmente útil para especificar un área geográfica. Por lo tanto, los mapas de imágenes se utilizan con mayor frecuencia en temas geográficos.
• Es más conveniente trabajar con una imagen: no tiene que preocuparse por unir fragmentos separados al cortar, y la imagen se puede colocar fácilmente en el lugar correcto.

Desventajas

• La forma compleja del área de enlace aumenta la cantidad de código HTML. El contorno se aproxima mediante un conjunto de segmentos de línea recta, para cada punto de dicho segmento, se deben especificar dos coordenadas, y el número total de tales puntos puede ser bastante grande.
• En consecuencia, aumenta la complejidad de especificar coordenadas. No es conveniente especificarlos manualmente, por lo que hay que utilizar programas especiales que muestren visualmente las áreas y permitan editarlas.
• Al cambiar la imagen, por ejemplo, al hacer zoom, tendrá que volver a establecer las coordenadas de todas las áreas de los enlaces.
• No puede aplicar diferentes efectos a las tarjetas de imagen que están disponibles al cortar una imagen en fragmentos: efecto de balanceo, animación parcial, optimización individual de imágenes para una carga rápida.
• No hay límites de enlace bien definidos. Por lo tanto, estos límites deben resaltarse por diferentes medios directamente en la imagen. Si la imagen no se cargó por alguna razón, entonces se vuelve muy problemático entender el conjunto de enlaces.

Desde el punto de vista de la comodidad del usuario, los mapas de imágenes tienen solo una ventaja: la inclusión de enlaces de varias formas. Esto agrega claridad a la presentación de la información: no estamos limitados a una forma de enlace rectangular y podemos usar enlaces de configuración compleja para nuestros propios fines.

Los mapas de imágenes vienen en dos versiones diferentes: servidor y cliente. Si se utiliza la opción de servidor, el navegador envía una solicitud al servidor para obtener la dirección del enlace seleccionado y espera una respuesta con la información necesaria. Este enfoque requiere un tiempo de espera adicional y archivos separados para cada mapa de imagen.

En la versión de cliente, el mapa se encuentra en el mismo documento HTML que el enlace a la imagen. Para indicar que la imagen es un mapa, se aplica el atributo usemap del elemento ... Un puntero a la descripción de la configuración del mapa, que se establece mediante el elemento

Ejemplo 1. Crear un mapa de imágenes

Dentro del contenedor

Elemento tiene los siguientes atributos.

• forma: define la forma del área activa. La forma puede tener la forma de un círculo (círculo), rectángulo (rect), polígono (poli).
• alt: agrega texto alternativo para cada área. Sirve solo como comentario para el enlace, ya que no se muestra en la pantalla. Obligatorio si href está presente.
• título: muestra una información sobre herramientas al pasar el cursor sobre un área.
• href - especifica la dirección del documento al que ir, su acción es similar a un atributo similar del elemento .
• coords: especifica las coordenadas del área activa. Las coordenadas se miden en píxeles desde la esquina superior izquierda de la imagen, que corresponde al valor 0, 0. El primer número es la coordenada horizontal, el segundo es la vertical. La lista de coordenadas depende de la forma del área.

Para un círculo, se establecen tres números: las coordenadas del centro del círculo y el radio.

Hola. Bernatsky Andrey contigo.

En este tutorial, le mostraré cómo crear mapas de imágenes HTML.

Mapa de imagen - se trata de algún tipo de imagen, tal vez una fotografía, que tiene varias zonas activas.

Por ejemplo, al hacer clic en la zona activa, vamos a una URL específica. Si está en vkontakte.ru, hay un ejemplo de un mapa de imagen: esto es cuando marcan en una foto, y cuando pasa el mouse sobre una persona marcada en la foto, se muestran su nombre y apellido, y cuando hace clic con el mouse, va a la página de esta persona.

Primero, les ofrezco una versión en video de esta lección:

Todo esto se hace de manera bastante simple. Hacemos cualquier foto con amigos. Mejor insertarlo en su propio bloque separado