如何使图像不可见，但在按下指定图像的按钮时显示？答案

【问题标题】：How do I make an image be invisible but show when I press the button specifying the image?如何使图像不可见，但在按下指定图像的按钮时显示？
【发布时间】：2013-10-28 00:21:45
【问题描述】：

我正在尝试创建一个 JavaScript 可见性函数，当我按下图像的按钮时，它会出现。图像没有出现。我隐藏了图像，因为我只希望它们在按下按钮时显示。我该怎么做才能解决这个问题？

<html>
<head>
<style type="text/css">
#xbone {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
#ps4 {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
#wiiu {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    visibility: hidden;
}
</style>
<script type="text/javascript">
function xbox()
    {
        document.getElementById("xbone").style.visibility="visible";
    }
    funtion sony()
     {
        document.getElementById("xps4").style.visibility="visible";
    }
    funtion nintentdo()
     {
        ddocument.getElementById("wiiu").style.visibility="visible";
    }
</script>
<img id="xbone" src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/06/19/XboxOne1.jpg" alt="Xbox One" width="800" height="600">
<img id="ps4" src="http://gamingbolt.com/wp-content/uploads/2013/06/ps4-hd-wallpapers.jpg" alt="Playstation 4" width="800" height="600">
<img id="wiiu" src="http://www.digitaltrends.com/wp-content/uploads/2012/09/Wii-U.jpg" alt="Wii U" width="800" height="600">
<input type="button" value="XBox One" onclick="xbox()">
    <input type="button" value="Playstation 4" onclick="sony()">
        <input type="button" value="WII U" onclick="nintendo()">
</head>
<body>

</body>
</html>

【问题讨论】：

标签： javascript html css visibility

【解决方案1】：

第一个真正的答案：

<div style = "visibility:hidden" id = "xbone"><img src = "xbone.jpg" /></div>
<button type = "button" 
onclick = "document.getElementById("xbone").style.visibility =
"visible"">Display XBONE</button>

但也要确保并修复语法错误。

【讨论】：

【解决方案2】：

只是一个想法，...使用隐写术方法，例如 RGB (lsb) 并将一张图片隐藏在另一张图片中。每当按下按钮，隐写术反向工作并出现隐藏的图片。我在python中使用了stepic并且工作正常。不知道java。对不起，如果它没有帮助，我还是新的:)

【讨论】：

【解决方案3】：

你有很多错别字。

funtion nintentdo() 应该是function nintendo()

ddocument.getElementById("wiiu") 应该是document.getElementById("wiiu")

您还应该从<head> 中取出您的imgs 和输入，并将它们放入您的<body>。

【讨论】：

【解决方案4】：

查看这篇文章 - Show/hide image with JavaScript

另外你的html结构不正确，应该是：

<html>
    <head>
        <style type="text/css">
        </style>
            <script type="text/javascript">
            </script>
    </head>
<body>

    <!-- all content goes here -->

</body>
</html>

【讨论】：