Hace unos días tuve que ayudar a una compañera de facultad para que pudiera realizar un trabajo de fin de carrera. Se trataba de mostrar una imagen que en principio se encontraba oculta, al hacer click en un botón. Algo bastante simple pero que muy poca gente sabe hacer de manera correcta. A continuación, te mostraré como lo hice:

Código HTML

El código HTML estará formado por un div con id #myimageDiv, que luego referenciaremos con Javascript para mostrar la imagen. Este mismo div, que estará oculto por defecto “display: none”, englobará a nuestra imagen.

<div id="myimageDiv" style="display:none">  </div>

Código Javascript

Crearemos con javascript una función, la llamaremos showHide. Lo que hará será cambiar el display none de la imagen con id #myimageDiv, a display inline, esto hará que se muestre la imagen.

<script type="text/javascript"> <!-- function showHide(){ //create an object reference to the div containing images var oImageDiv=document.getElementById('myimageDiv') //set display to inline if currently none, otherwise to none oImageDiv.style.display=(oImageDiv.style.display=='none')?'inline':'none' } //--> </script>

Código HTML 2

Finalmente, añadiremos después de todo esto un botón, que referencie a la función showHide() que indicamos antes. Con esto ya tendremos creado nuestro botón que muestra la imagen al hacer click.

<button onclick="showHide()" >Hazme click</button>

Ejemplo de su funcionamiento

Eso ha sido todo, ahora si quieres puedes ver un ejemplo de su funcionamiento o si lo prefieres, descargar el código fuente: