En ¿Cómo se hace? el blog que actualiza y mantiene Vku he visto una imagen con la particularidad que contiene un botón de cerrar, cuando hacemos click sobre el botón la imagen desaparece, en un principio quizás no se vea nada del otro mundo pero tiene su utilidad cuando se trata de mostrar contenido de interés y que este tenga un lugar preferente sin llegar a molestar la lectura. Es necesario utilizar un script y lógicamente el contenido que deseamos mostrar.
La forma de añadirlo es la siguiente, justo antes de </head> añadimos el script:
<script>
function cerrarimagen(){
div = document.getElementById("cerrar");
div.style.display="none";
}
</script>
Y el bloque de añadir las imágenes después de <body>
<div id='cerrar' style='border: 0 !important; background: transparent; left:830px;top:60px;position:fixed;width: 60px;z-index:9999'> <a href='javascript:cerrarimagen();'><img src='url-imagen-cerrar' style='float: right;' title='Cerrar'/><img src='url-imagen-a-mostrar'/></a></div>
Para el ejemplo no he sido muy imaginativa dada la euforia que se vive ahora mismo en la calle con el mundial y a media hora de comenzar el partido que pasará a la historia así que añadí la misma idea que nuestro amigo de ¿Cómo se hace?
* Con width movemos la imagen a mostrar hacia la izquierda o derecha.
* La imagen de cerrar la añadimos ayudándonos de left y top porque según el tamaño de la imagen nos quedará en una esquina u otra.
* Con float: right indicamos si la imagen la añadimos a la derecha y con float: left en caso de ser a la izquierda.
No hay comentarios:
Publicar un comentario