Mostrar imagen o mensaje con botón de cerrar

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'>



</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();'>



</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.

Si tienes alguna opinión respecto a la entrada, tienes un punto de vista distinto, o simplemente quieres saludar, te invito a que dejes un comentario. NO SE ACEPTAN LINKS DE REFERIDOS para que los comentarios no se conviertan simplemente en una forma de publicitarse.