javascript - html点击按钮显示/隐藏图片？

Question

所以，我是 html 新手，说我有 2 个按钮，分别名为“显示图片 1”和“显示图片 2”

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

我还希望能够在 Picture1 所在的位置显示 Picture2（如果正在显示 Picture1，则隐藏 Picture1）。

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

到目前为止，我用于显示图片 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>

谢谢

Answer 1

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

<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()"/>