Una de las cosas que más nos interesan a los webmasters es realizar un sitio con contenido dinamico y que por sobre todo sea completamente atractivo para el usuario. En muchos casos hay información que no deseamos mostrar salvo que el usuario quiera verla (como comentarios), y debemos ocultar dicho div, y tan solo mostrarlo cuando él usuario desea.
Para esto utilizamos Javascript y CSS para lograr nuestro proposito.
Lo mismo sería con divs flotantes sólo que a los mismos hay que colocarles diferentes funciones javascript y su posición deberá ser absolute o relative dependiendo de lo que busquemos.
Para mostrar y ocultar un div debemos instanciar un div con un ID único y en el estilo incluir style=”display:none;” por ejemplo:
<div id=”flotante” style=”display:none;”> </div>
Luego debemos realizar dos funciones en javascript para mostrar y ocultar dicho div respectivamente.
<script>
function mostrardiv() {
div = document.getElementById(‘flotante’);
div.style.display = ”;
}
function cerrar() {
div = document.getElementById(‘flotante’);
div.style.display=’none’;
}
</script>
Una vez hecho esto, tenemos las funciones en javascript que mostrarán y ocultarán el div cuando el usuario haga click en una imagen o un texto con el link a la función, como en el siguiente ejemplo:
<div id=”mostrarDiv”><a href=”javascript:mostrardiv();”>Mostrar Div</a></div>
<div id=”flotante” style=”display:none;”> Este es un div oculto <br><a href=”javascript:cerrar();”> presiona aquí para cerrar</a> </div>
Acá tienen el ejemplo para verlo más claramente, si quieren pueden copiar el código fuente.
