ToolTip para imágenes y vista previa de sitios web.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Si para tu sitio web o página quieres colocar una opción para mostrar una captura de pantalla de un sitio web al pasar el mouse sobre el enlace del sitio, o también para crear vista previa de imágenes y fotos, por ejemplo para visualizar un catálogo de productos o colección de fotografías, con este ejemplo en Javascript lo puedes hacer muy fácilmente.

El ejemplo es completamente gratuito y de libre uso. A continuación puedes ver algunas notas y descripción de la instalación en tu página web.

Mas información sobre el programa.

Indice del contenido

  1. Nota sobre la previsualización de sitios webs.
  2. Funcionamiento del tooltip.
  3. Instalación e implementación en la página.
  4. Ejemplos y usos.

 

1 - Nota sobre la previsualización de sitios webs

Una cosa importante es que, este ejemplo no obtiene la captura en forma dinámica, es decir que nosotros previamente tendremos que crear la captura del sitio y guardarla en una carpeta de imágenes y luego subirla al servidor.

Por eso el ejemplo solo puede ser útil para páginas sencillas, con pocos enlaces y que sean estáticos ya que tendrás que crear las capturas de forma manual. Para páginas dinámicas, donde hay un nuevos enlaces, o páginas con muchas URLs, este ejemplo no serviría.

2 - Funcionamiento del tooltip.

Cuando el usuario coloque el cursor sobre la URL de la web, se desplegará un ToolTip con el screenshot de la página, es decir mostrará una pequeña imagen con la captura de pantalla de la página principal del sitio.

El tamaño del gráfico lo puedes crear con el ancho y alto que quieras, por defecto el utilizado en el ejemplo es de 200x164 pixeles.

3 - Instalación e implementación en la página.

La instalación e implementación es muy simple. El archivo de descarga contiene un ejemplo, en la carpeta tooltip\03.

Dentro de esta carpeta se encuentran dos Javascript que deberemos referenciar en la sección HEAD del código HTML. ( jquery.js y main.js), como se puede ver a continuación.

Luego, para configurar el enlace para que visualice el ToolTip con la imagen del sitio, solo debemos agregarle un atributo Class con el valor screenshot. Y también otro atributo REL donde aquí deberemos poner la ruta al archivo gráfico, es decir la captura.

Por ejemplo:

Otra opción, es la de poder mostrar un título simple o texto para el nombre del sitio web o para un comentario. Para esta opción, es igual que en el caso anterior, pero agregando una etiqueta TITLE con el texto a mostrar:

Nota: También, además de los dos javascripts necesarios para que funcione el ToolTip, en la sección HEAD se debe definir el estilo CSS llamado ScreenShot .

Este CSS es para configurar el estilo visual o presentación en la página, por ejemplo allí podemos indicar si queremos modificar el background, padding, color del texto para el título, el tipo de borde del recuadro.

Importante: No debes cambiar el nombre del estilo CSS screenshot, ya que ese estilo está definido en el script de configuración main.js. En caso de modificarlo, también deberás hacerlo en dicho archivo.

4 - Ejemplos y usos.

En la carpeta tooltip/01 podemos ver como crear tooltips simples con texto.

En la carpeta tooltip/02, muestra como generar, a partir de un thumbnail, vista previa de imágenes, muy útil para ver gráficos y fotos sin necesidad de abrirlas en una nueva ventana de navegación, por ejemplo para mostrar un catálogo de productos o cualquier otro uso similar en el que se necesite visualizar imágenes a partir de una vista miniatura.

Este ejemplo funciona de la misma forma que en el anterior, pero el estilo utilizado se llama preview, es decir ese es el CSS que deberemos definir para la página, y también el que hay que colocar en el atributo Class.

Si queremos visualizar un caption o título descriptivo para la imagen puedes ver en el mismo ejemplo como hacerlo, agregando una etiqueta ALT con el texto a mostrar.


Requerimientos de instalación y uso.

Lenguaje: Javascript.

Requiere: jQuery.


Videos tutoriales.

Indice de videos.

En este tutorial, podrás ver además del funcionamiento del Tooltip mirando los tres ficheros de ejemplo ( los archivos index.html de cada carpeta), como poder insertar el código fuente necesario dentro de los enlaces y las etiquetas IMG de cada uno de los gráficos para crear los Tooltips de imágenes.

Duración del video: 6 Minutos, 06 Segundos.

( Ver este video en YouTube en alta definición - HD)

 

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://cssglobe.com
Licencia:
Gratis
Versión:
--
Idioma:
Inglés
Programa actualizado:
02 MAY 2011


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: