Pages

Categories

Search

 

JavaScript: Boton que oculta y muestra una imagen

JavaScript: Boton que oculta y muestra una imagen

Por
enero 6, 2015
javascript
No hay Comentarios,se el primero!

Hola aqui les dejo un efecto de javascript muy util sobre un boton que muestra una imagen con un click y la oculta con otro click en la misma pagina.
Ver Ejemplo

El codigo si lo quieres copiar desde aqui
—————————-
Esto va antes de cerrar head
<style>
div.msghead {cursor: pointer;border-bottom: 1px solid #585858;
background: #09F;

margin-top: 2px;
margin-bottom: 1px;
padding: 12px 15px;
display: inline-block;
width: 354px;

text-align: center;
color: #ffffff;
font-size: 15px ;
font-family: Arial;

vertical-align: middle;
}

</style>
<script src=’https://dl.dropboxusercontent.com/s/rd6wo9585czu4t7/jquery.tools.min.js’></script>

<script type=’text/javascript’>

$(document).ready(function()
{
//hide the all of the element with class msgbody
$(“.msgbody”).hide();
//toggle the componenet with class msgbody
$(“.msghead”).click(function()
{
$(this).next(“.msgbody”).slideToggle(600);
});
});
</script>

————————
esto va despues de body

<center>div class=”msghead”>
Ver Foto</div>
<div class=”msgbody”>

<img src=”http://perustudio.com/wp-content/uploads/2015/01/10406791_803764319683635_4485550520098188710_n.jpg” /></div>
</center>
y si quieres ver el video donde te explican mas detalaldamente

y si deseas descargar todo el codigo click en el siguiente enlace DESCARGAR