overLIB
librería JavaScript para mejorar las webs con pequeñas ventanas popup
Categorías de nuestra sección de INFORMES DE INTERNET:
- El ABC del posicionamiento WEB
- ¿Dinero en Internet?
- Programas de afiliación para webmasters
- Recursos gratuitos
| En JoseanE.com |
| - Programas gratuitos - Descarga programas - Descarga juegos - Descargas móviles - Diseño WEB - Buscador - Buscador de pisos - Enlaces - Correo gratuito - Revistas gratis - Juegos gratis - Informes Internet - Posicionamiento en buscadores - Ganar Dinero - Webmasters - Promoción WEB - Recursos Gratuitos - Midi-cine - Calc. PageRank  - Los usuarios en línea de tu web - Hosp. Windows - Ofertas de viajes - De compras - Natación - Ciclismo - Empresas - Páginas personales - Leer correo |
| - Explora esta WEB |
|
Sugerencias: |
A PRECIO DE LLAMADAS NACIONALES |
| Llamadas Internacionales 902 |
| Ofertas de viajes |
PageRank de esta página:
PageRank Google
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 overLIB
Para 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ón
La 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ásicas
Lo 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:
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 overLIB
Se 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 órdenes
La 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
Hace el popup de tipo sticky. Queda "clavado" hasta que sea cerrado.
CAPTION título
Crea una barra de título con el texto título.
FGCOLOR color
Color del interior del popup.
BGCOLOR color
Color del borde del popup.
TEXTCOLOR color
Color del texto dentro del popup. El color se especifica entre comillas simples
y se puede indicar con un código hexadecimal '#008000' o con un nombre 'white'
Ejemplo: aquí
CAPCOLOR color
Color del texto de la barra del título
CLOSECOLOR color
Color del texto "close" que aparece arriba a la derecha de la barra
del título
TEXTFONT fuente
Elige la fuente del texto principal.
CAPTIONFONT fuente
Elige la fuente del título.
CLOSEFONT fuente
Elige la fuente del texto "close".
TEXTSIZE tamaño
Tamaño de la fuente del texto principal
CAPTIONSIZE tamaño
Tamaño de la fuente del título.
CLOSESIZE tamaño
Tamaño de la fuente del texto "close"
WIDTH pixels
Achura del popup.
HEIGHT pixels
Altura del popup.
LEFT
Alinea el popup a la izquierda del ratón.
RIGHT
Alinea el popup a la derecha del ratón
CENTER
Alinea el popup centrado respecto al ratón.
ABOVE
Pone el popup por encima del ratón.
Nota: Sólo posible si se ha fijado HEIGHT.
BELOW
Pone el popup por debajo del ratón.
BORDER pixels
Fija el grosor del borde.
OFFSETX x
Separación horizontal del popup respecto al ratón.
OFFSETY y
Separación vertical del popup respecto al ratón.
FGBACKGROUND imagen
Define una imagen para ser utilizada dentro del popup.
Nota: Hay que poner FGCOLOR a '' o el color también se mostrará.
BGBACKGROUND imagen
Define una imagen para ser utilizada como borde del popup.
Nota: Hay que poner BGCOLOR a '' o el color también se mostrará.
Nota: Cuando hay un enlace "Close", Netscape re-dibuja las celdas de
la tabla, haciendo que las cosas se vean bastante mal.
CLOSETEXT texto
Reemplaza el testo "Close" con cualquier otro texto.
NOCLOSE
Indica que no se muestre el texto "Close" en stickies con caption.
STATUS texto
Pone el texto en la barra de estado.
AUTOSTATUS
Pone en la barra de estado el mismo texto que el del popup. Nota: Anula STATUS.
AUTOSTATUSCAP
Pone en la barra de estado el mismo texto que el del caption. Nota: Anula STATUS
y AUTOSTATUS.
INARRAY id
Le dice a overLIB que lea el texto del array ol_texts, que está en
overlib.js.
Esta orden puede ser usada en lugar del texto.
Ejemplo: overlib(INARRAY, 1);
CAPARRAY id
Indica a overLIB que lea el texto del caption del array ol_caps.
CAPICON url
Dibuja un pequeño icono delante de la barra del título.
SNAPX rejilla
Ajusta el popup en una posición de una rejilla horizontal.
SNAPY rejilla
Ajusta el popup en una posición de una rejilla vertical.
FIXX posición
Bloquea la posición horizontal del popup.
Nota: Anula todas las demás órdenes de posicionamiento horizontal.
FIXY position
Bloquea la posición vertical del popup.
Nota: Anula todas las demás órdenes de posicionamiento vertical.
BACKGROUND imagen
En lugar de utilizar la tabla como fondo, se utilizará la imagen.
PADX izquierda derecha
Llena la imagen de fondo con espacios en blanco horizontales para el
posicionamiento del texto.
Nota: Esta es una orden de dos parámetros.
PADY arriba abajo
Llena la imagen de fondo con espacios en blanco verticales para el
posicionamiento del texto.
Nota: Esta es una orden de dos parámetros.
FULLHTML
Permite controlar el HTML sobre una imgen BACKGROUND. El código html se debe
poner en el "texto".
FRAME marco
Controla popups en un marco diferent. Debéis aseguraros de que la etiqueta
<DIV> está también en el marco destino. El parámetro marco pasado a
esta orden no debe ser un string de texto.
Nota: Esta característica, aunque funciona bien, está considerada como
experimental en la versión 3.10.
Ejemplo: overlib('Texto', FRAME, parent.abajo), asumiendo que tenemos un marco
llamado abajo.
Ejemplo de overlib con imágenes
Aquí 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.
|
Páginas vistas |
|