SELFHTML / Barra
HTML
Imágenes en HTML
| SELFHTML / Barra
HTML
Imágenes en HTML
|
¡Escuche radio! |
 |
Mapas de imágen (Image Maps) |
|
|
 | |
Mapas de imágenUn mapa de imágen es una imágen, la cual el usuario puede pulsar con el ratón. Posteriormente es realizado un enlace. De esta manera el usuario puede llegar a las informaciones en muchos casos intuitivamente y mucho más rápido que normalmente con listas de enlaces.
<map name="Imagendeprueba"> <area shape=rect coords="1,1,249,49" href="#ancla"> <area shape=rect coords="1,51,149,299" href="archivo.htm"> <area shape=rect coords="251,1,399,399" href="../archivo.htm"> <area shape=rect coords="151,51,249,299" href="http://www.nada.es/"> <area shape=rect coords="1,301,249,399" nohref> </map> <img src="hypgraph.gif" usemap="#Imagendeprueba" border=0> |
Con <map name=> introduce la definición del mapa de imágen. Después del signo de menos debe poner el nombre para el mapa de imágen. Ese nombre no tiene nada que ver con el nombre del archivo gráfico. Se trata más que todo de un nombre ancla, que tiene el mismo significado que el nombre en un 
enlace de ancla dentro de un archivo HTML. No adjudique nombres muy largos. Los nombres no deben contener espacios en blanco o símbolos especiales como la "ñ" española.. Utilice como símbolo especial solamente la raya inferior "_". El nombre debe estar entre comillas. Después del nombre termina la etiqueta introductoria <map> con >.
La etiqueta <map> puede estar en cualquier lugar dentro del cuerpo del archivo HTML (o sea entre las etiquetas <body> y </body>). Las especificaciones de ese comando no generan ninguna clase de visualizaciones en la pantalla. Es recomendable sin embargo, anotar el comando en un lugar destacado dentro del archivo, poe ejemplo al principio o al final del cuerpo del archivo.
Entre la etiqueta introductoria <map...> y la etiqueta de cierre </map> define los enlaces del mapa de imágen. Con <area...> define los enlaces en la superficie de la imágen determinada, que usted liga en otro lugar.
Con ayuda de la especificación shape=rect, determina una superficie cuadrangular, con shape=circle un círculo, y con shape=polygon puede definir un polígono cualquiera como un enlace.
En coords= debe especificar las coordinadas de la superficie del mapa de imágen. Las especificaciones de píxeles singnifican valores absolutos dentro de la imágen, que deben contener hypervínculos. Los datos deben estar entre comillas. Separe los valores en píxeles con comas.
Con el atributo href= puede determinar el destino o sea el archivo que debe ser llamado, cuando el usuario pulsa esa parte del mapa de imágen. Aquí también son válidas las reglas de 
enlaces. Su usted desea especificar una superficie explísitamente como no pulsada, entonces puede hacerlo con el atributo nohref. Si usted omite tales especificaciones, entonces las superficies que no están cubiertas con href=, se convierten en superficies no pulsadas automáticamente.
La imágen que ha de ser un mapa de imágen, debe ser referenciada de manera común con ayuda de la etiqueta <img> (véase para ello ligar imágenes). Para caracterizar la imágen como un mapa de imágen, debe usar el atributo usemap= (véase el ejemplo de arriba). Después del signo de igualdad, especifique el nombre que le ha dado al mapa de imágen en la etiqueta introductoria <map>. El nombre debe estar entre comillas y le debe preceder un signo #.
Para darse cuenta de las coordinadas en píxeles que necesita para el mapa de imágen, puede utilizar por ejemplo un programa procesador de gráficos que le de tal información al pasar el ratón por la superficie de la imágen.
Usted puede también definir el mapa de imágen en otro archivo HTML que en donde referencia la imágen. En este caso debe especificar usemap= el nombre del archivo y el destino de salto dentro del archivo, donde debe ser definido el mapa de imágen. Esto funciona igualmente que en los enlaces.
Para visualizar una pequeña ventana ("Tooltip") cuando pasa el ratón por un mapa de imágen, usted puede usar en las etiquetas <area> el respectivamente el atributo universal title="Mi texto visualizado". Esto es interpretado por el MS Internet Explorer a partir de la versión 4.x. Netscape todavía no conoce esta especificación en su versión 4.x.
Dentro de cada etiqueta <area> es permitido también el atributo tabindex=. El resultado es el mismo que como en la sucesión del tabulador en enlaces y es descrita allí detalladamente. También es permitido el atributo accesskey=. Funciona de la misma manera que como en las abreviaturas del teclado para enlaces y es descrito detalladamente allí.
|
Mapas de imágen (server-sided)Con este método es necesario para la gestión de los mapas de imágen una comunicación entre el navegador y el computador del servidor. Esto significa que los mapas de imágen de esta manera sólo pueden ser realizadas en línea (o sea no en computadores locales), y que usted debe aclarar con su servidor la manera de preceder. La ventaja es que esos mapas de imágen también pueden ser visualizados con navegadores viejos. La desventaja es el tratamiento complicado de los mapas. El consorcio W3 no aconseja usar estos mapas, ya que causan tráfico innecesario en las redes.
El principio funciona de la siguiente manera: El navegador sabe que se trata de un mapa de imágen con ayuda de un comando HTML. Cundo el usuario pulsa en algún lugar de la imágen visualizada, el navegador transfiere las coordinadas (relativas a la esquina superior izquierda de la imágen) a un software de "Imagemap" especial en el computador del servidor. Ese software determina si en la superficie pulsada se encuentra un hipervínculo. En caso de que sí, entonces determina que enlace es asociado con el. La dirección del enlace correspondiente es enviada entonces al navegador. El navegador realiza entonces el enlace.
Si usted desea seguir este camino, entonces consulte a su proveedor que clase de sofware él utiliza en su servidor para el tratamiento de mapas de imágen, y que necesita exactamente. Generalmente es necesario un llamado "archivo mapa" y una entrada en el archivo de configuración. En el archivo mapa coordina los mapas de imágenes y los enlaces. En el archivo de configuración es necesaria una entrada para el software del servidor.
Existen varias variantes para la síntaxis de los archivos mapas. Pídale a su proveedor un ejemplo y documentación de la variante ofrecida por él.
El siguiente ejemplo muestra la parte que usted debe anotar en el archivo HTML.
<a href="MapName"><img src="archivo.gif" ismap></a> |
En medio del comando para el tratamiento de un mapa de imágen, se encuentra el comando HTML para el ligamiento de una imágen. En el ejemplo es ligado el archivo "archvo.gif". El comando debe además contener el src= atributo ismap. Mediante este se le informa al ordenador del servidor que se trata de un mapa de imágen.
La construcción total es una imágen como enlace. En tal caso el comando para el ligamiento de la imágen se encuentra en el lugar, en donde normalmente se encuentra el texto en textos de enlace, que le es ofrecifo al usuario como texte de enlace.
El destino del enlace no es sin embargo un archivo, sino un nombre simbólico, que fue dado en el archivo mapa que mencionamos arriba. En el ejemplo es el nombre simbólico "MapName".
|
| |
siguiente: |
Recursos de imágenes internas de los navegadores
|
anterior: |
Imágenes como enlaces
|
| SELFHTML / Barra
HTML
Imágenes en HTML
|
¡Escuche radio! |
Traducción Virgilio Krumbacher, krumbacher@selfhtml.com.ar
