Html html点击按钮显示/隐藏图片?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16504202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:19:20  来源:igfitidea点击:

html click button display/hide picture?

javascripthtmltoggle

提问by user2278906

So, I am new to html and say I have 2 buttons named "Show Picture 1" and "Show Picture 2"

所以,我是 html 的新手,并说我有 2 个按钮,名为“显示图片 1”和“显示图片 2”

I want to be able to display Picture1 after clicking the button "Show Picture 1".

我希望能够在单击“显示图片 1”按钮后显示图片 1。

I also want to be able to display Picture2 where Picture1 was (and hide Picture1 if Picture1 was being displayed).

我还希望能够在图片 1 所在的位置显示图片 2(如果正在显示图片 1,则隐藏图片 1)。

What is the code I should write to allow this to happen?

我应该写什么代码来允许这种情况发生?

My code so far for displaying picture 1:

到目前为止,我用于显示图片 1 的代码:

<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('Picture1');
obj.className = 'show';
}
</script>



<center>
<img id="Picture1" src=Picture1.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Picture1">
</center>

Thanks

谢谢

回答by Sridhar

/// if ur looking to toggle image try this simple code////

/// 如果你想切换图像试试这个简单的代码////

<script type = "text/javascript">
        function pic1()
        {
            document.getElementById("img").src = "picture 1 source";
        }
        function pic2()
        {
            document.getElementById("img").src ="picture 2 source";
        } </script>





    <img src = "" id = "img"/> <input type="button" value="Show Picture
    1" onclick="pic1()"/> <input type="button" value="Show Picture 2"
    onclick="pic2()"/>