Info de POP UP y Rollover

Muchos de nuestros usuarios nos consultaron sobre cómo implementar un pop-up en su sitio para
que se abra en forma automática al iniciar la página, o simplemente a través de un enlace.El

lenguaje que vamos a utilizar para realizarlo es nada más y nada menos que JavaScript.
Abrir un ventana a través de un enlace
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.
JavaScript: se ubica entre las etiquetas <head> y </head>:
<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.
Abrir una ventana automáticamente
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">
var opciones="toolbar=no, location=no, directories=no, status=no, menubar=no,
}
</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.
var opciones= "toolbar=no, location=no, directories=no, status=no, menubar=no,
}
La Magia De Las Ventanas

PopUp
(Parte II)
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).
Según nuestras pruebas, este tipo de ventana produjo los mejores

resultados y conversando con mi socio sobre esto, sacamos la conclusión
que esto se podría explicar porque quizá el cliente ya estuvo expuesto al
mensaje de venta y está listo para tomar un recordatorio del sitio, lo cual no
sucede cuando recién ingresa y aparece el Pop-up con un aviso. En este
último caso, el cliente aún no sabe de que se trata la oferta ni intuye los
beneficios que podría lograr suscribiéndose al boletín.
• Pop-up Retardado
Este es un Pop-up que se abre luego de un tiempo de haber visitado el sitio

y podría considerarse un poco intrusivo porque al perderse la conexión
inmediata con el sitio original, podría ser creado fuera de contexto
(probablemente no, porque si el cliente visitó el sitio, probablemente es
porque la información le interesa).
• Pop-Inter
Este es un Pop-up que realmente no es una ventana, sino un artilugio que se

pinta dentro de la misma ventana que está abierta y parece un Pop-up, pero
no es un Pop-up y no puede ser bloqueado por los bloqueadores de Pop-up
(aún). Si deseas colocar un Pop-up al anunciar en Google, la única forma es
con estas ventanas ya que sino, Google te rechazará el anuncio (según ellos,
dicen que los Pop-ups disminuyen las ventas, yo digo que ellos no quieren
perder ventas porque ya capturaste el email de tus posibles clientes).
Me gustaría también comentar sobre los formularios de suscripción dentro

de la página de ventas. En mis mediciones, estos han sido bastante efectivos
(la mitad de efectivos del exit Pop-up, que fue el mejor) y aunque no se
trata de Pop-ups, lo comento aquí porque todos los Pop-ups que despliego
en mi sitio son con el fin de conseguir que el visitante se suscriba a alguna
de mis publicaciones.
Hace sólo un tiempo era necesario contratar un programador para realizar

cualquiera de estos PopUps y probar cual funciona mejor resultaría bastante
costoso. Ahora existen herramientas para hacerlo y la mejor que he visto la puedes
encontrar aquí:
COMO HACER UN POPUP (Forma 1)

Por medio de un Javascript, cabe mencionar que con este ejemplo en muchos de los
navegadores es bloqueado por seguridad. Haz clic en la barra amarilla (para Iexplorer)
si ésta aparece, y elige permitir contenido bloqueado.
Copia esto en el HEAD del HTML.
Si deseamos modificar el tamaño, deberemos cambiar el valor a las propiedades

WIDTH y HEIGHT, y para las otras propiedades el 1 significa SI y el cero NO, Ejemplo:
quieres que no aparezca la barra de herramientas el valor de TOOLBAR deja en 0.
En el BODY de la página escribe esto:
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í.

Si lo quieres hacer con un botón utiliza este código:
Esto lo escribirás en el HEAD del HTML
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.

Otro ejemplo, javascrit, podría ser uno que al cargar la pagina, abre una ventana de
alerta, con el siguiente código.
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.
Un tooltip es una herramienta de ayuda visual patentada por Microsoft el 19 de

Diciembre del 2002 (patente 20020191027), que funciona al situar o pulsar con el ratón
sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario
de la finalidad del elemento sobre el que se encuentra.
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.

Info de POP UP y Rollover

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Info de POP UP y Rollover

Uploaded by

Copyright:

Available Formats

Muchos de nuestros usuarios nos consultaron sobre cómo implementar un pop-up en su sitio para

que se abra en forma automática al iniciar la página, o simplemente a través de un enlace.El

Abrir un ventana a través de un enlace

JavaScript: se ubica entre las etiquetas <head> y </head>:

Abrir una ventana automáticamente

La Magia De Las Ventanas

Según nuestras pruebas, este tipo de ventana produjo los mejores

Este es un Pop-up que se abre luego de un tiempo de haber visitado el sitio

Este es un Pop-up que realmente no es una ventana, sino un artilugio que se

Me gustaría también comentar sobre los formularios de suscripción dentro

Hace sólo un tiempo era necesario contratar un programador para realizar

COMO HACER UN POPUP (Forma 1)

Copia esto en el HEAD del HTML.

Si deseamos modificar el tamaño, deberemos cambiar el valor a las propiedades

En el BODY de la página escribe esto:

COMO HACER UN POPUP (Forma 2)

COMO HACER UN POPUP (Forma 3)

Un tooltip es una herramienta de ayuda visual patentada por Microsoft el 19 de

You might also like