Hace unos dÃas los de IBM, en su sección dedicada a los desarrolladores, publicaban un post donde explicaban varios efectos diferentes hechos en AJAX de los que se llevan tanto ahora. Están basados en las librerÃas estrellas de javascript como scriptaculous o prototype juntando 5 técnicas en total. Todos los ejemplos los tenemos recopilados en un .rar, con las librerÃas que usan, código html y css. Vamos a ver como implementar dos de ellos, uno para mostrar información al pasar el ratón por encima de un enlace y otro para mostrar texto en un cuadro superpuesto al picar sobre determinado lugar.
Antes de nada nos descargamos el pack donde vienen todos los ejemplos con sus códigos correspondientes.
Mostrando información al pasar el ratón (tooltips) – DEMO
Hacemos una nueva carpeta y le ponemos el nombre Popup. Dentro hacemos otra con el nombre js. Metemos dentro de esta última las librerÃas prototype.js y tooltip.js.
Creamos un archivo html y entre head /head llamamos a las dos librerÃas:
[html]
[/html]
Seguido insertamos el css para configurar el aspecto del popup y del texto que lo lanza (esta hoja podrÃa ir linkada desde fuera del documento, pero para el ejemplo lo haremos asà porque es poco código):
[css]
[/css]
Hacemos el esqueleto necesario en html entre body /body:
[html]
[/html]
Justo debajo de la etiqueta de cierre /body llamamos el popup:
[html]
[/html]
El texto que mostrará la ventana emergente está dentro de text.php, asà que creamos un archivo php, metemos el texto que nos apetezca y lo guardamos como text.php dentro de la carpeta Popup. Guardamos el archivo html que hemos estado haciendo como index.html en la carpeta Popup.
Terminado. El ejemplo es muy simple, pero a partir de este se podrÃa complicar todo lo que os de la cabeza.
Mostrar texto en ventana emergente (lightbox tex) – DEMO
Hacemos una nueva carpeta y la llamamos LightboxText. Creamos otras dos, con nombre js y css. Dentro de la primera metemos las librerÃas lightbox.js y prototype.js y en la segunda lightbox.css.
Creamos un archivo html y entre head /head llamamos a las dos librerÃas:
[html]
[/html]
A continuación llamamos a la hoja de estilos:
[html]
[/html]
Y entre body y /body colocamos la siguiente estructura:
[html]
[/html]
*el div es opcional, en esta caso está puesto para darle estilo al enlace
Igual que en el caso anterior el texto que se mostrará en el nuevo cuadro se encuentra dentro de text.php, para lo cual creamos un archivo .php, metemos el texto que queremos y lo guardamos en la carpeta LightboxText. Guardamos el archivo html que hemos estado haciendo como index.html en la carpeta LightboxText.
Todos los ejemplos, con una vista previa y explicaciones de cada código en: Ajax and XML: Ajax for lightboxes
