如何讓圖像不可見，但在按下指定圖像的按鈕時顯示圖像？

我正在嘗試製作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>

來源

2013-10-19 cpom1

第一個真正的答案：

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

但要確保和解決語法錯誤也是。

來源

2013-10-19 04:22:57 Durnehviir

非常感謝。 – cpom1

只是一個想法，...利用隱寫術的方法，如RGB（LSB）和隱藏另一張圖片中的圖片。每當按下按鈕，隱寫術反向工作並出現隱藏的圖像。我在python中使用了stepic，並且很好地工作了。對不起，如果它沒有幫助，我還是新的:)

來源

2013-10-19 02:56:33

你有很多錯別字。

funtion nintentdo()應該function nintendo()

ddocument.getElementById("wiiu")應該document.getElementById("wiiu")

你也應該把你的IMGS和投入了<head>，並把它們放在你的<body>。

來源

2013-10-19 03:09:02 rla4

檢查這個帖子 - 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>

來源

2013-10-19 03:21:31 Geblord

謝謝:) :) – cpom1

如何讓圖像不可見，但在按下指定圖像的按鈕時顯示圖像？

回答

相關問題