Html 按下按钮时如何使图像显示？

按下按钮后如何显示和/或隐藏图片

正文{
背景色：#000；
背景图片：url(http://www.carolyndecristofano.com/wp/wp-content/uploads/2012/03/iStock_000017124788Large.jpg);
背景重复：无重复；
}
标题{
宽度：1906px；
高度：980px；
背景图片：url(https://stormideaswus.blob.core.windows.net/headerjunction/2014/91/6d2380c6-00e3-4f58-a911-c8aa98afa460.jpg);
背景重复：无重复；
背景尺寸：封面；
背景位置：底部；
位置：相对位置；
底部：78px；
右：10px；
}
.按钮{
显示：块；
高度：100px；
宽度：940px；
背景#34696f；
边框：2倍实心rgba（33,68,72,0.59）；
颜色：rgba（0,0,0,0.55）；
文本对齐：居中；
字体：粗体3.2em/100px“Helvetica Neue”，Arial，Helvetica，日内瓦，无衬线；
背景：线性梯度（顶部，#34696f，#2f5f63）；
边界半径：50px；
盒影：0 8px 0#1b383b；
文本阴影：0 2px2pRGBA（255,255,255,0.2）；
}
a、 钮扣{
位置：相对位置；
底部：78px；
文字装饰：无；
}
.按钮2{
显示：块；
高度：100px；
宽度：940px；
背景#34696f；
边框：2倍实心rgba（33,68,72,0.59）；
颜色：rgba（0,0,0,0.55）；
文本对齐：居中；
字体：粗体3.2em/100px“Helvetica Neue”，Arial，Helvetica，日内瓦，无衬线；
背景：线性梯度（顶部，#34696f，#2f5f63）；
边界半径：50px；
盒影：0 8px 0#1b383b；
文本阴影：0 2px2pRGBA（255,255,255,0.2）；
}
a、 按钮2{
位置：相对位置；
底部：182px；
左：945px；
文字装饰：无；
}
#展示{
背景图片：url(http://i.imgur.com/iEMr3n4.png)位置：相对位置；
左：px；
底部：300px；
}

---

您可以使用如下一点javascript来完成：

功能按钮（）{
document.getElementById（'show'）.style.visibility='visible'；
}
功能按钮2（）{
document.getElementById（'show'）.style.visibility='hidden'；
}

$（文档）.ready（函数（）{
$（'.button'）。单击（函数（）{
$（'#show'）.css（'display'，'block'）；
});
$（'.button2'）。单击（函数（）{
$（'#show'）.css（'display'，'none'）；
});
});

<a href="#" onclick="button()" class="button">show</a>
<a href="#" onclick="button2()" class="button2">hide</a>
<div id="show">

</div>
<script>
function button(){
document.getElementById('show').style.visibility='visible';
}
function button2(){
document.getElementById('show').style.visibility='hidden';
}
</script>

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.button').click(function(){
     $('#show').css('display','block');
 });
 $('.button2').click(function(){
     $('#show').css('display','none');
 });

});