新手编程:HTML5显示图像 - 按钮onclick =

时间:2012-06-27 04:17:25

标签: button onclick

这里的第一次程序员,在HTML5上编写简单的程序。单击按钮时似乎无法显示图像。这是我的代码:

<p>
    <center>
    <button onclick="DeadTest()">
    <img src="BeginTest.gif"/></button></center></p>

    <script language="javascript" type="text/javascript">
        function DeadTest() 
        {
            <img style="border-width: 0px;" src="White.jpg" width="768" height="1280" />
        }
    </script>

浏览了无数的网站和论坛,但似乎无法让它发挥作用。尝试过alert()函数,它正在运行。我认为它必须与调用图像的代码有关。

第一次编程,所以它可能看起来很愚蠢。教我,哦,大师......

2 个答案:

答案 0 :(得分:2)

首先了解如何正确调用javascript函数以及如何更改属性的基础知识。

参见我的示例演示。希望你能从中学习。

http://jsfiddle.net/NgryM/1/

<script  type="text/javascript">
    function ButtonClick() 
    {
        alert('Button was clicked');
    }
    function ImageClick(){
        alert('Image was clicked');
    }
    function ChangeImageSrc(){
        var img = document.getElementById('myImage'); 
        img.src = "http://www.ivankristianto.com/wp-content/uploads/2011/05/Javascript.gif";
    }

    function ChangeSize(){
        var img = document.getElementById('myImage'); 
        img.height = "80";
        img.width = "40";    
    }

    </script>
<p>
    <center>
        <input type="button" onclick="ChangeImageSrc()" value="Change Image Src"/>
        <input type="button" onclick="ButtonClick()" value="Test Button Click"/>
        <input type="button" onclick="ChangeSize()" value="Change Size"/>
        <img id="myImage" src="http://www.mmncs.com/wp-content/uploads/javascript_logo.gif" onclick="ImageClick()"/>    
    </center>
</p>

答案 1 :(得分:1)

<p><center><button style="background:url('Login_Button.png');width:86px;height:45px" onclick="DeadTest()"></button></p>
<div><img id="img1"  style="visibility:hidden" src="a3.jpg" width="768" height="1280" /></div>
<script>
    function DeadTest(){
        document.getElementById('img1').style.visibility='visible';
    }
</script>