|
|
Autor: Erik Bosrup URL de procedencia: http://www.bosrup.com/web/overlib overLIB es una librería JavaScript creada para mejorar las webs con pequeñas ventanas "popup" informativas que ayuden a los visitantes de vuestras webs. Le suministra al usuario información de lo que sucederá cuando pulse en un enlace.Descarga de overLIBPara descargar overLIB 3.50 pulsar aquí. Esta es la última versión editada por Erik Bosrup el 28 de Agosto de 2001. Asegúrate de leer la documentación antes de realizar ninguna consulta. NOTA: La versión incluida en el fichero zip es la original que contiene muchos comentarios, por contra, ocupa 30K. Si quieres una versión comprimida sin comentarios (25K) puedes descargar la versión que uso yo en esta web overlib.js DocumentaciónLa mejor forma de aprender a utilizar overLIB es probando las distintas opciones, por este motivo, esta documentación no es muy extensa, únicamente contiene instrucciones básicas a modo de referencia. Las partes básicasLo primero que hay que hacer es extraer el archivo "overlib.js" del overlib310.zip que habéis descargado y ponerlo en vuestro servidor en el mismo directorio donde residan las páginas que vayan a utilizar la librería. Posteriormente hay que preparar la página en la que vayáis a utilizar overLib. Para ello debéis añadir estas líneas: |
||||||
|
||||||
|
Páginas
vistas
|
entre las etiquetas <BODY> y </BODY>. Yo os recomiendo que las añadáis al principio, es decir, inmediatamente después de <BODY> Si tu página ya tiene otras capas <DIV> es posible que quieras cambiar el valor de z-index. El siguiente paso es ya el uso de overLib. Pero antes de empezar es necesario describir los dos tipos de popus que se pueden crear con overLib. El primero es el que desaparece cuando el ratón se mueve fuera del enlace. El segundo se queda clavado hasta que se seleccione otro enlace. A este último le llamamos "sticky". Podeis ver las diferencias entre ambos aquí y aquí. Veamos el código. Primero el de los popus normales: Como podéis ver no se ha utilizado un enlace normal, hemos puesto como HREF javascript:void(0); en lugar de una url. Esto hace que el navegador no salte a ninguna página si lo cliqueamos. Por supuesto que esto es opcional, podemos enlazar con la pagina que queramos. En la parte onMouseOver es donde entra overLIB. Independientemente del tipo de popup que queráis, hay que llamar a la función overlib(). Puede tener cualquier número de parámetros. Más adelante entenderéis la utilidad de esto. Para crear un sencillo popup con un texto, basta con poner el texto entre comillas simples. Después viene onMouseOut. Contiene una función críptica que debe estar ahí. La función nd() hace que el popup desaparezca cuando mueves el ratón fuera del enlace. No obstante esta función hay que incluirla también aunque el popup sea un sticky. Veamos ahora el código del sticky: La única diferencia entre las dos formas (exceptuando el texto) es que la del sticky tiene un parámetro detrás del texto. Este parámetro, STICKY, le dice a overLIB que queremos que nuestro popuq quede "clavado". Ahora que conocemos el uso más elemental echemos un vistazo a algunos aspectos un poco más avanzados. Si queremos que al cliquear en un enlace nos aparezca un popup, no es demasiado difícil, simplemente pondremos el código overLIB en el evento onClick en lugar de onMouseOver (o en ambos). Por ejemplo: Analicemos el código de nuevo: Aquí tenemos la llamada overlib() en onClick, y tenemos unos cuantos parámetros más. Estos parámetros indican a overLIB que ha de comportarse de una determinada manera, por lo que les llamaremos órdenes. La primera orden de un popup es siempre el texto entre comillas simples. (Aunque no siempre es cierto, ver posteriormente la descripción de INARRAY en la referencia de órdenes). A continuación del texto podéis pasar cualquier orden que deseis en cualquier orden. Algunas órdenes necesitan datos adicionales, en estos casos el siguiente parámetro será el dato. (Algunas órdenes requieren más de un parámetro) Veamos las órdenes de nuestro ejemplo. Primero está STICKY que indica que el popup es del tipo sticky. La siguiente orden es CAPTION y su parámetro 'Sticky!'. Esto indica a overLIB que queremos una barra de título cuyo texto será Sticky!. Después la última orden CENTER indica que el popup estará centrado bajo el ratón. Una vez conocemos la forma de trabajo de la función overlib(), podéis mirar la referencia de funciones para estudiar como se puede personalizar overLIB todavía más. Hay más de 40 órdenes diferentes con los que se puede jugar. Personalizando overLIBSe puede personalizar overLIB de muchas formas poniendo diferentes órdenes en la función overlib(). Las órdenes afectan únicamente al popup específico de la función. Algunas veces, no obstante, querréis hacer cambios en muchas páginas o únicamente en una. Por esta razón, se puede personalizar overlib.js o bien fijar el valor de unas pocas variables en la páginas html. Para personalizar overlib.js simplemente abre el fichero y sigue las directrices que contiene, está bien documentado en lo que se debe editar y en lo que no. Para personalizar overLIB para una página determinada, es necesario asignar valores a unas pocas variables JavaScript. Simplemente utilizaremos las variables que nos interesen de la sección de personalización de overlib.js. Cualquier variable que no utilicemos, tomará los valores por defecto especificados en overlib.js. Si no entiendeis estás cosas, probablemente necesitarás leer sobre JavaScript y HTML algo más. Echarle un vistazo a los enlaces que os proponemos en Recursos gratuitos (II). Referencia de órdenesLa notación que se uiliza en esta referencia es: ORDEN parámetro Nótese que algunas órdenes no tienen parámetros y otras tienen más de uno. Tener en cuanta también que las órdenes son sensibles a mayusculas y minúsculas. STICKY Ejemplo: aquí
Ejemplo de overlib con imágenesAquí puedéis ver el overlib con imágenes, como podéis ver en realidad se puede poner cualquier código html El código fuente es el siguiente: <a href="http://www.joseane.com" onMouseOver="return overlib('<center><a href="http://www.joseane.com"><img border=0 src=" onMouseOut="nd();" target="_blank">JoseanE.com</a> Fijate que no he utilizado las comillas dobles en su lugar deberás utilizar la secuencia de escape " Puedes ver aquí una tabla con las secuencias de escape Espero que este ejemplo os haya sido útil. Josean.
|
|||||
|
|
