Con esta opción podemos mostrar una imagen, un mensaje de texto o lo que quieran dentro de un elemento div.
Leer esta entrada: Elementos span y div
Paso 1:
Ir a Diseño, Edición de HTML y justo arriba de </head>
Poner el siguiente código:
<script type='text/javascript'>
function cerrarelemento(){
div = document.getElementById("cerrarelemento");
div.style.display="none";
}
</script>
Paso 2:
Creación del contenido que mostraremos:
1:) Ahora tenemos que crear el div con sus propiedades y con el id "cerrarelemento".
Ejemplo como se ve en la imagen:
<div id='cerrarelemento' style='border: 0 !important; background: transparent; left:15px;top:40px;position:fixed;width: 190px;z-index:9999'>
<!-- Acá va el contenido a mostrar -->
</div>
Cambiar a gusto, en este ejemplo se mostrará en position fija, arriba sobre la izquierda.
El ancho ( widht: 190px ) es igual al ancho de la imagen.
Dentro de este código va a ir los otros códigos: 2, 3 y 4.
2:) El link que llamará a la función de cerrar.
<a href='javascript:cerrarelemento();'>
<!-- Acá va lo que vamos a mostrar y cerraremos al hacer clic -->
</a>
Dentro de este código va a ir los otros códigos: 3 y 4.
3:) Creación del botón para cerrar.
Yo elegí una imagen, pero también puede ser un texto.
Ejemplo:
<img src='URL DE LA IMAGEN CERRAR' style='float: right;border: 0' title='Cerrar'/>
En el ejemplo se muestra la imagen de cerrar del lado derecho, si prefieren pueden cambiarla hacia la izquierda solamente cambiando float: right, por float: left.
4:) Contenido a mostrar que se cerrara con el botón.
<img src='URL DE LA IMAGEN' style='border: 0'/>
Yo puse una imagen con un ancho de 190px. (el ancho de la imagen es igual que el ancho del div [código 1] )
Paso 3:
Juntamos todos los códigos del Paso 2, desde el 1 al 4.
Lo colocaremos abajo de <body>
Queda así:
<div id='cerrarelemento' style='border: 0 !important; background: transparent; left:15px;top:40px;position:fixed;width: 190px;z-index:9999'><a href='javascript:cerrarelemento();'><img src='URL DE LA IMAGEN CERRAR' style='float: right;border: 0' title='Cerrar'/><img src='URL DE LA IMAGEN' style='border: 0'/></a></div>
Guardamos los cambios.
Códigos CSS para personalizar:
left:15px: distancia desde la izquierda.
top:40px: distancia desde arriba.
position:fixed: se muestra el contenido del div siempre fijo con la posición establecida por left y top.
width: 190px: distancia desde la izquierda para mostrar la imagen de cerrar.
float: right: muestra la imagen de cerrar del lado derecho.
El Paso 2 es para que se entienda el código.
Colocar lo del Paso 1 y 3 personalizando los estilos CSS.
0 comments:
Post a Comment