admin管理员组

文章数量:1201994

Just beginning to learn HTML & Javascript. I have the following code, which works. however, because I have have an img tag in my body it is trying to show a place holder for an image before I click the button. How can I stop this.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tesco JSONP</title>

    <script type="text/javascript">

        function picture(){ 
        var pic = ".jpg"
        document.getElementById('bigpic').src = pic.replace('90x90', '225x225');

        }


    </script>


</head>

<body>


        <img id="bigpic" src="bigpic" />

    <button onclick="picture()">Enlarge</button>

</body>

</html>

Best wishes.

Just beginning to learn HTML & Javascript. I have the following code, which works. however, because I have have an img tag in my body it is trying to show a place holder for an image before I click the button. How can I stop this.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tesco JSONP</title>

    <script type="text/javascript">

        function picture(){ 
        var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
        document.getElementById('bigpic').src = pic.replace('90x90', '225x225');

        }


    </script>


</head>

<body>


        <img id="bigpic" src="bigpic" />

    <button onclick="picture()">Enlarge</button>

</body>

</html>

Best wishes.

  • javascript
  • html
Share Improve this question asked Jan 1, 2014 at 14:03 user2694771user2694771 1392 gold badges3 silver badges8 bronze badges 1
  • your code is correct.. – mehdi Commented Jan 1, 2014 at 14:13
Add a comment  | 

3 Answers 3

Reset to default 10

Add style "display:none" to picture tag

<img id="bigpic" src="bigpic" style="display:none;"/>

And in function picture change it for show image

document.getElementById('bigpic').style.display='block';

There is demo: http://jsfiddle.net/eX5kx/

Use display property in css, try this:

javascript:

function showPicture() {
  var sourceOfPicture = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg";
  var img = document.getElementById('bigpic')
  img.src = sourceOfPicture.replace('90x90', '225x225');
  img.style.display = "block";
}

html:

<img style="display:none;" id="bigpic" src="bigpic" />
<button onclick="showPicture()">Enlarge</button>

I like shin solution, i would do the same thing myself. However theres a lot of way to do that, another option is to put a tiny trasparent image as default and then replace like you did to the other one. like this: 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tesco JSONP</title>

    <script type="text/javascript">

        function picture(){ 
        var pic = "http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"
        document.getElementById('bigpic').src = pic.replace('90x90', '225x225');

        }


    </script>


</head>

<body>

     // tiny trasparent image
    <img id="bigpic" src="https://maps.gstatic.com/mapfiles/markers2/dd-via-transparent.png" alt="" />

    <button onclick="picture()">Enlarge</button>

</body>

</html>

this way no css is needed but like i said before i prefer Shin's solution.

本文标签： javascriptdisplay an image only when button is clickedStack Overflow

版权声明：本文标题：javascript - display an image only when button is clicked - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738638800a2104192.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。