Internet, Deporte y Educación

Página personal de Sergio Palay

Crear un banner flotante en una página web

Posted by sergiopalay en febrero 18, 2013

La oferta permanece activa hasta que apretamos cerrar.

La oferta permanece activa hasta que apretamos cerrar.

El siguiente pique es para colocar una ventana flotante en cualquier página html algo que se usa mucho a la hora de presentar ofertas o información que es útil que aparezca al inicio de la carga de la web pero que puede ser cerrada fácilmente.
Van los pasos:

PASO 1
Editar el archivo de la página web (Se puede hacer con programas especiales como DreamWeaver, FrontPage, etc. o simplemente abriéndolo con el clásico Bloc de notaas)

PASO 2
Ubicamos el espacio comprendido entre la etiqueta <head> y la etiqueta </head>

PASO 3
En cualquier parte de dicha etiqueta (el encabezamiento de la página) copiamos el siguiente código

<script>function cerrarimagen(){div = document.getElementById(“close”);div.style.display=”none”;}</script>

PASO 4
Ubicamos el espacio comprendido entre la etiqueta <body> y la etiqueta </body>

PASO 5

En cualquier parte del Body copiamos el siguiente código.

<div id=’close’ style=’border: 0 !important; background: transparent; left:830px;top:60px;position:fixed;width: 475px;z-index:9999′> <a href=’javascript:cerrarimagen();’><img src=’DIRECCION COMPLETA DE DONDE ESTÁ ALOJADO EL BOTON CERRAR … EJEMPLO http://www.arho.com.uy/images/cerrar.jpg&#8217; style=’float: right;’ title=’Oferta de febrero’/><img src=’DIRECCION COMPLETA DE DONDE ESTÁ ALOJADA LA IMAGEN … EJEMPLO  http://www.arho.com.uy/images/oferta.jpg’/></a></div&gt;

PASO 6
Guardar

Nota: Comentando el código del paso 5, veremos que tenemos dos lugares dedicados a las imágenes, una del botón cerrar y otra de la imágen del banner. Las mismas deben haber sido subidas a una carpeta dentro del sitio previamente.
Los otros parámentros de destaque que se pueden ajustar son de ajuste: top ajusta hacia arriba y left hacia la izquierda … mientras que width define el ancho de la ventana.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: