Info de POP UP y Rollover
Info de POP UP y Rollover
Info de POP UP y Rollover
Esta opción es realmente útil para mostrar algún tipo de información fuera del sitio. Un ejemplo claro
puede ser nuestra sección de Downloads, en la cual antes de comenzar la descarga de un programa se
abre una pequeña ventana informando que se inició la descarga y si no comienza se ofrece la posibilidad
de clickear sobre el enlace directo al archivo para descargarlo con el Mass Downloader, GetRigth o
simplemente desde el navegador.
<html>
<head>
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no,
scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
</head>
<body>
<a href="javascript:Abrir_ventana('popup.html')"><font size="1"
face="Verdana">Click aquí para abrir la ventana</font></a>
</body>
</html>
En el script anterior, se puede observar el código fuente de la función encargada de abrir la ventana, y
dentro del cuerpo de la página (<body>) el enlace que llama a dicha función.
Es muy común ingresar a un sitio y ver que se abre una ventana en forma automática. Para ello
utilizaremos el mismo script que el anterior pero con la diferencia de agregar un tag en el <body> para
que se ejecute la función al iniciar la carga de la página.
<html>
<head>
<script language="JavaScript">
function Abrir_ventana (pagina) {
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no,
scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
</script>
</head>
<body onload="Abrir_ventana('popup.html')">
</body>
</html>
Aclaraciones
Notamos que en la función se puede configurar las opciones de la ventana que se va a abrir. Algunas de
ellas son la posibilidad de mostrar o no la barra de herramientas, la de direcciones, la de status, la de
menúes, las de desplazamiento, si se permite o no la posibilidad de cambiar el tamaño, y las medidas de
la ventana.
function Abrir_ventana (pagina) {
var opciones= "toolbar=no, location=no, directories=no, status=no, menubar=no,
scrollbars=no, resizable=yes, width=508, height=365, top=85, left=140";
window.open(pagina,"",opciones);
}
Continuando sobre los tipos de popup, mencionaremos algunos más que resultan
interesantes:
• Exit Pop-up
Esta es una ventana que se abre justo después que cierras una ventana y es
el equivalente de estar en una tienda y cuando vas saliendo, un vendedor te
dice: Espere! y te ofrece algo para que no te vayas con las manos vacías
(para que no te olvides de la tienda).
• Pop-up Retardado
• Pop-Inter
Esto hará abrir una ventana con la página www.google.com, cabe mencionar que
puedes crear otra página y ubicar su nombre ahí.
Esto otro adentro del BODY, recuerda que puedes cambiar los valores de las
propiedades, que son enviadas por referencia al hacer clic en el botón.
Esto en el HEAD
Y esto en el BODY
LOS ROLLOVERS
Hemos visto como crear Popup para ser llamados de tres formas diferentes, otra forma
de crear publicidad son los Rollover, aquí te muestro como quedaría el código
Javascript. (los Rollover son imágenes que cambian al pasar el Mouse sobre ellas).
NOTA: necesitaras las imágenes ejemplo_1 y ejemplo_2, para su funcionamiento.
De nueva cuenta: esto ubícalo en el HEAD
Y esto otro en el body
Tooltip
Un tooltip en una página web.
Los tooltip son una variación de los globos de ayuda y es un complemento muy usado
en programación, dado que proporcionan información adicional sin necesidad de que el
usuario la solicite.