Mensajes emergentes en imágenes ::

  Aquí veremos cómo hacer que se despliegue un mensaje cuando dejamos el cursor del mouse sobre una imagen.

  Para empezar les propongo repasar un poco de HTML, sobre todo vamos a ver la parte de imágenes. Para poner imágenes en una página web usamos la etiqueda IMG y la propiedad SRC para decir donde está la imagen que queremos mostrar, como valor de la propiedad usamos la ruta de la imagen. Recordemos que una ruta es una conjunto de nombres de directorios la cual puede ser relativa o absoluta, y al final de la ruta necesitamos poner el nombre de la imagen.

  Un poquito sobre rutas. Una ruta relativa, es relativa al directorio donde se encuentra la página web. Los directorios los podemos ubicar en niveles, la raíz es el nivel más alto (podemos considerar C:\ como la raíz en nuestra computadora), y a partir del directorio de la página podemos crear una ruta subiendo o bajando de nivel. Para subir de nivel usamos ../ (si lo usamos una vez estamos en el directorio que incluye al directorio de la página) para bajar de nivel solo ponemos el nombre de algún subdirectorio dir1/ por ejemplo. Las rutas absolutas son siempre desde la raíz y siempre bajan de nivel, porque no hay nivel superior a la raíz. Para no complicarnos podemos poner las imágenes de una página en le mismo directorio que ella, así la ruta necesaria para ubicarla es vacía y como valor de SRC usamos solo el nombre de la imagen.

  Visto un poco de rutas podemos decir que nuestra ruta es ../dir1/dir2 y si la imagen se llama mi_imagen.gif, el valor para la propiedad SRC es ../dir1/dir2/mi_imagen.gif.

  Ahora podemos poner la imagen en la página web, el HTML necesario queda como vimos:



  Ahora la única propiedad que nos interesa es ALT, que se define como texto alternativo a la imagen lo que sirve cuando no se encuentra la imagen o navegamos con la opción de no ver las imágenes, el texto alternativo aparece en lugar de la imagen para que el usuario que navega no se pierda en la página. Imaginemos que hacemos un menú con imágenes, cada imagen tiene una palabra que dice a donde me lleva cuando hago click en ella, ahora bien, si esoty navegando sin ver imágenes porque es más rápido, y las imágenes que conforman el menu no tienen texto alternativo, ¿cómo se que clickear?.

  Vimos una funcionalidad del texto alternativo, pero a nosotros nos interesa otra, si podemos ver imágenes, el texto alternativo no aparece, pero si dejamos el mouse sobre la imagen, aparece un cuadro con el texto alternativo.

El HTML completo queda así:





En esta imagen el mensaje es "Hola soy Pablo", deja el mouse sobre ella para ver el funcionamiento.