Writing HTML | Acerca de | FAQ | Alumnos | Tags | Lecciones | anterior |

23. Imágenes Clickeables

Objetivos

• Comprender la diferencia entre procesos del Cliente y procesos del Servidor.
• Crar una imagen inline que tenga diferentes partes hiperconectadas con otros sitios web, imágenes o páginas.

Lección

En la lección 7a aprendimos cómo escribir el HTML para colocar una imagen inline en nuestra página web y en la lección 8e vimos cómo podíamos hacer que la imagen misma actuase como link hipertexto a algún otro elemento relacionado. Desde los primeros días del Web ha existido un mecanismo para hacer que diferentes partes de una imagen actúen como links hipertextos diferenciados; esto se conoce como "imágenes clickeables" o "mapas".

PERO hasta hace relativamente poco los mapas requerían que algunas cosas se procesaran en el web server. Así es como funciona:

1. El usuario ve una página con un mapa clickeable y... hace click en la parte inferior derecha.
2. El Browser dice... "¡Eh! ¡Alguien ha hecho click sobre esta imagen! Tengo que mandar un mensaje al Web Server. Alguien hizo click en estas coordenadas de la imagen."
3. El Web Server dice... "Mmmm... Tengo estas coordenadas para esta imagen. El archivo HTML desde donde se originó el click dice que mire las coordenadas en este archivo... Bien, el archivo dice que, si las coordenadas están en esta región rectangular, entonces enviar al usuario a esta URL". El Server entonces le devuelve esta información al Browser.
4. El web Browser dice... "Bien, el server dijo que fuera a esta URL. ¡Vayamos!"

Spyglass fue el primer Browser que incorporó la capacidad de realizar los cálculos y transmitir la URL correcta basándose en las coordenadas que habían sido incorporadas en el HTML de la página. Este es un proceso del lado del cliente. ¡La conversación anterior ahora tiene lugar entre el Browser y él mismo! Para más información acerca de mapas de imágenes vea la Página de ayuda de Mapas de Imágenes (IHiP).

El HTML necesario para tener un mapa de imagen desde el cliente es:

  <img src="imagen.gif" usemap="#map_name">

  <map name="map_name">
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
  <area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
         :
         :
   </map>

NOTA: Para identificar las coordenadas de una región activa deberá usar algún programa gráfico. Yahoo lista algunas utilidades que hacen esto fácilmente. Para esta lección le daremos las coordenadas exactas.

En esta lección vamos a añadir a nuestra página Terminología de Volcanes (archivo term.htm) una imagen mostrando las diferentes clases de erupciones volcánicas. Cada una se enlazará con un web externo. Además crearemos dos links más a a nuestros (propios) archivos locales.

1. En primer lugar, necesitará bajarse una copia de la imagen desde el "Centro de Descarga de Imágenes de la Lección 23".

   Salve este archivo como volc.jpg y asegúrese de que lo almacena en el directorio/carpeta pictures.

2. Abra su archivo term.htm en su editor de textos.

3. Después del último párrafo ("... un volcán históricamente activo en la isla de la Martinica. <p>") añada este HTML:

   
   Han habido muchas y muy diferentes erupciones volcánicas
   y formación de tierras. Se pueden clasificar de acuerdo con el grado
   de "explosividad" y la altura de la columna erupcionada:
   <p>
   <center>
   <font size=+2>
   Investigue cada tipo haciendo click sobre su imagen
   </font><br>
   <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
   <p>
   </center>
   

   NOTA: Hemos insertado una imagen inline que referenciará a un conjunto de coordenadas asociadas con el nombre "volcmap". La etiqueta <center>...</center> alinea la imagen en el medio de la página (vea la lección 20). El atributo border=0 dentro de la etiqueta <img> suprime la visualización de la caja hipertexto alrededor de la imagen.

4. Lo siguiente que añadiremos es el HTML para el mapa de coordenadas. Esto se puede colocar en cualquier lado dentro del mismo documento HTML; sigue siendo HTML que el Browser no mostrará por pantalla. Le sugerimos que lo añada justo después del HTML que introdujo en el paso anterior:

   <map name="volcmap">
   <area shape="rect"
    href="http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html" 
      coords="48,46,204,153">
   <area shape="rect" href="explode.html" 
      coords="0,66,26,227">
   <area shape="rect" href="height.html" 
      coords="95,283,378,309">
   <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/"  
      coords="321,154,468,261">
   <area shape="rect" href="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html" 
      coords="172,155,318,274">
   <area shape="rect" href="http://www.soest.hawaii.edu/hvo/" 
      coords="36,155,168,276">
   <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" 
      coords="90,3,343,123">
   </map>

   NOTA: Debería ver que 5 de las 7 áreas definidas conectan con sitios Internet. Las otras dos son documentos locales que crearemos en pasos siguientes.

5. Salve su archivo term.htm.

6. Ahora tenemos que crear dos archivos HTML más que serán enlazados desde el mapa. Cree un nuevo documento en su editor de textos y escriba en él:

   
   <html>
   <head>
   <title>Explosividad</title>
   </head>
   <BODY BGCOLOR=#000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Web de Volcanes / 
   <A HREF="index.htm">Indice</A> / 
   <A HREF="term.htm">Terminología de Volcanes</A> / 
   </H5>
   
   <h1 align=center>Explosividad</h1>
   La <b>explosividad</b> de una erupción volcánica
   observada se estima calculando la fuerza de
   la erupción.
   Los experimentos han demostrado que cuando el agua
   entra en contacto con el magma la erupción es
   mucho más fuerte; este fenómeno se conoce como <b>hydro-volcanism</b>.
   <p>
   
   En las erupciones prehistóricas se estimó el grado de explosividad
   por su grado de fragmentación en pequeñas partículas volcánicas.
   Una erupción más explosiva "hará añicos" una capa
   volcánica mucho más que una explosión menos explosiva.
   <p>
   
   <a href="term.htm"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Volver a la <i>Web de Volcanes</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.htm">Web de Volcanes</A> : 
   <A HREF="term.htm">Terminología de Volcanes</A> : 
   Explosividad</B> <p>
   
   creada por Alberto Estrada, <A HREF="mailto:aestrada@pele.bigu.edu">aestrada@pele.bigu.edu</A><br>
   Estudios Volcánicos, <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>última modificación: 1 de Abril de 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/explode.htm</tt>
   <p>
   </body>
   </html>
   

   Salve este documento en el mismo directorio de sus otros archivos HTML y llámele explode.htm

7. Ahora cree un segundo documento en blanco y ponga este texto en él:

   
   <html>
   <head>
   <title>Altura de Columnas Erupcionadas</title>
   </head>
   
   <BODY BGCOLOR=#000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Volcano Web / 
   <A HREF="index.htm">indice</A> / 
   <A HREF="term.htm">Terminología de Volcanes</A> / 
   </H5>
   
   <h1 align=center>Altura de Columnas Erupcionadas</h1>
   La altura de la nube de una erupción volcánica (en kilómetros) se toma de observación directa
   o de estimaciones basadas en cuentas históricas.
   La <b>altura</b> de la nube de una erupción
   volcánica (en kilómetros) se toma de observación directa
   o de estimaciones basadas en cuentas históricas.
   <p>
   
   Para las erupciones prehistóricas esta escala se calcula
   sobre <b>restos</b> de productos volcánicos;
   esto es, cuán lejos y dispersos están esparcidos. Las erupciones
   volcánicas con columnas muy altas dispersarán restos
   más lejos y en zonas más amplias.
   <p>
   
   <a href="term.htm"> 
   <img src="../pictures/left.gif" alt="** " border=0> 
   Volver a la <i>Web de Volcanes</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.htm">Web de Volcanes</A> : 
   <A HREF="term.htm">Terminología de Volcanes</A> : 
   Altura de Columnas Erupcionadas</B> <p>
   
   creada por Alberto Estrada, <A HREF="mailto:aestrada@pele.bigu.edu">aestrada@pele.bigu.edu</A><br>
   Estudios Volcánicos, <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>última modificación: 1 de Abril de 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/explode.htm</tt>
   <p>
   </body>
   </html>
   

   Salve este documento en el mismo directorio que sus otros archivos HTML y llámele height.htm.

8. Ahora abra el archivo term.htm en su web Browser. La imagen de los diferentes volcanes debería aparecer y, mientras desplaza el ratón sobre las diferentes regiones de la imagen, el cursor debería cambiar a una "mano" y, en algún lugar en la parte inferior de la ventana del Browser, debería haber un indicador de la URL de la región "activa" con la que se conectará si se hace click.

Cubriendo Las Bases

Para nuestro caso podemos establecer una página especial que tenga un mensaje para los Browsers que no soportan mapas de imágenes clickeables desde el cliente:

1. Primero necesitaremos crear un nuevo archivo HTML llamado nomap.htm. Abra un nuevo documento en su editor de textos y ponga en él:

   
   <html>
   <head>
   <title>Sin Mapa de Imágenes</title>
   </head>
   <BODY BGCOLOR = #000000 TEXT=#EEEEBB 
   LINK=#44DDFF VLINK=#00FF88>
   <H5>Web de Volcanes / 
   <A HREF="index.htm">Indice</A> / 
   <A HREF="term.htm">Terminología de Volcanes</A> / 
   </H5>
   
   <h1 align=center>¡Perdón!</h1>
   Aparentemente su Browser no soporta mapas de imágenes desde el cliente.
   Puede acceder a la información siguiendo estos links:
   <ul>
   <li><A HREF="explode.htm">Explosividad</A>
   <li><A HREF="height.htm">Altura de Columnas Erupcionadas</A>
   <p>
   <li><A HREF="http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html">Surtseyan</A>
   <li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">FreatoPlínico</A>
   <li><A HREF="http://www.soest.hawaii.edu/hvo/">Hawaiiano</A>
   <li><A HREF="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html">Estromboliano</A>
   <li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plínico</A>
   </ul>
   <p>
   
   <a href="term.htm"> 
   <img src="../pictures/left.gif" alt="** " border=0> Volver a la <i>Web de Volcanes</i></a>
   
   <HR>
   <ADDRESS>
   <B><A HREF="index.htm">Web de Volcanes</A> : 
   <A HREF="term.htm">Terminología de Volcanes</A> : 
   Sin Mapa de Imágenes</B> <p>
   
   creada por Alberto Estrada, <A HREF="mailto:aestrada@pele.bigu.edu">aestrada@pele.bigu.edu</A><br>
   Estudios Volcánicos, <A HREF="http://www.bigu.edu/">
   Big University</A><p>
   <TT>última modificación: 1 de Abril de 1995</TT>
   </ADDRESS>
   <p>
   <tt>URL: http://www.bigu.edu/web/explode.htm</tt>
   <p>
   </body>
   </html>
   

   Salve este fichero como nomap.htm.

   NOTA: Vea cómo hemos ofrecido al usuario el acceso a la misma información disponible desde la imagen del mapa. Una buena página web no le restringe a nadie el contenido simplemente porque use un Browser diferente.

2. Ahora abra el archivo term.htm en su editor de textos.

3. Busque la línea que dice:

     <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>

   y reemplacela con:

     <a href="nomap.htm">
     <img src="../pictures/volc.jpg" usemap="#volcmap" border=0>
     </a>

   NOTA: Debería ser capaz de diseccionar este HTML. Si el Browser puede entender mapas de imágenes desde el cliente, así lo hará. De otro modo, la imagen entera será un hiperlink a la página nomap.htm page.

4. Salve este archivo y Actualícelo en su web Browser.

Compruebe Su Trabajo

Revisión

1. ¿Cuál es la diferencia entre mapas de imágenes desde el cliente y desde el servidor?
2. ¿Qué hace la etiqueta <map>...</map>?
3. ¿Cómo puede manejar los casos en que un Browser no entiende mapas de imagen desde el cliente?

Mas Información

  <img src="../pictures/buttonbar.gif" usemap="maps.htm#bmap3">

Digamos que está creando diversas (muchas) páginas que tienen al comienzo de las mismas una imagen de algunos botones que se enlazan con diferentes páginas web. Si usa este método podría referenciar un archivo imagen y un archivo que contenga las coordenadas. Si tiene que actualizar la barra de navegación (¿una nueva imagen? ¿una URL distinta en algún botón?) entonces ¡sólo necesitará modificar un archivo! comparado con modificar etiquetas <map>...</map> insertadas en cada una de las páginas web que usan la barra de botones.

Práctica Independiente

A Continuación....

IR A.... | Índice de Lecciones | anterior: "Más acerca de Imágenes y Listas" |

URL: