mostrar una imagen solo cuando se hace clic en el botón

Apenas comenzando a aprender HTML y Javascript. Tengo el siguiente código, que funciona. sin embargo, debido a que tengo una etiqueta img en mi cuerpo, está intentando mostrar un marcador de posición para una imagen antes de hacer clic en el botón. Cómo puedo detener esto.

    Tesco JSONP  function picture(){ var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg" document.getElementById('https://stackoverflow.com/questions/20869401/display-an-image-only-when-button-is-clicked/bigpic').src = pic.replace('90x90', '225x225'); }        

Los mejores deseos.

Añadir estilo “display: none” a la etiqueta de la imagen

  

Y en función de imagen cambiarlo para mostrar imagen.

 document.getElementById('https://stackoverflow.com/questions/20869401/display-an-image-only-when-button-is-clicked/bigpic').style.display='block'; 

Hay una demostración: http://jsfiddle.net/eX5kx/

Use la propiedad de display en css, intente esto:

javascript:

 function showPicture() { var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"; var img = document.getElementById('https://stackoverflow.com/questions/20869401/display-an-image-only-when-button-is-clicked/bigpic') img.src = sourceOfPicture.replace('90x90', '225x225'); img.style.display = "block"; } 

html:

   

Me gusta la solución shin, yo haría lo mismo yo mismo. Sin embargo, hay muchas formas de hacerlo, otra opción es poner una pequeña imagen transparente como predeterminada y luego reemplazarla como lo hizo con la otra. Me gusta esto:

 < !DOCTYPE HTML>    Tesco JSONP    // tiny trasparent image     

De esta manera no se necesita css, pero como dije antes, prefiero la solución de Shin.

Hay muchas maneras de arreglar eso.

-remover el borde alrededor de la etiqueta img{border:none}

– use div e imagen de fondo, cambie la imagen de fondo a la imagen de var.

 document.getElementById('divtag').backgroundImage = pic;