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: