仅在单击按钮时显示图像 [英] display an image only when button is clicked

查看:123
本文介绍了仅在单击按钮时显示图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

刚开始学习HTML&的JavaScript。
我有下面的代码,它的工作原理。然而,因为我的身体里有一个img标签,所以我试图在点击按钮之前显示图片的占位符。

 <!DOCTYPE HTML> 
< html>
< head>
< meta http-equiv =Content-Typecontent =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 =bigpicsrc =bigpic/>

< button onclick =picture()>放大< / button>

< / body>

< / html>

祝好。

解决方案

=bigpicstyle =display:none;/>

然后在函数图片中将它改为显示图片

 的document.getElementById( 'bigpic')的style.display = '块'。 

有演示: http://jsfiddle.net/eX5kx/


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.

解决方案

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/

这篇关于仅在单击按钮时显示图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆