单击按钮时可以显示图像

时间:2013-09-14 10:01:43

标签: javascript onclick

我对Javascript知之甚少,但我想创建一个脚本,在单击按钮时显示页面上的图像。

例如有一个谜语,你无法解决它所以你按下提示按钮并出现一个提示。相反的逻辑仅与图像相同。

感谢任何帮助。

3 个答案:

答案 0 :(得分:1)

在学习Javascript和jQuery之后,这将很容易http://jsfiddle.net/mgs_jsfiddle/KYvJR/

<p>
   <a id="btnShow" href="#">show</a>
   <a id="btnHide" href="#">hide</a>
</p>
<p>
    <img id="img" src="doesnotexist" width="100px" height="100px" alt=""/>
</p>

$(function() {
    $("#btnShow").click(function() {
        $("#img").show();
    });
    $("#btnHide").click(function() {
        $("#img").hide();
    });

})

答案 1 :(得分:0)

简单的解决方案。 你可以将所有图像放入这个div或者也可以分开..

<div id="image_holder" style="display:none">
//contains images
</div>

<input type="button" name="show" id="show" onclick="show_image()" />

<script type="text/javascript">
function show_image()
{
    document.getElementById("image_holder").style.display="block";  
}
</script>

答案 2 :(得分:0)

试试this,这有助于您

HTML

<img style='display:none' src='http://1.bp.blogspot.com/-xJEGhPWV5x8/UMA5xJBYFRI/AAAAAAAAKu0/R9gy-wLflEQ/s200/demo.jpg'/>
<input type="button" value='click Me'/>

JS

$('input[type=button]').click(function(){
$('img').show();
});