CODEWITHSUNDEEP
buttononclick
Sam Ng
Sam Ng

Reputation: 1

Newbie Programming: HTML5 Display Image - button onclick=

First time programmer here, writing simple program on HTML5. Can't seem to get image to display when button is clicked. Here is my code:

<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>

Have looked through countless sites and forums but just can't seem to get it to work. Have tried an alert() function and it is working. I think it must be something to do with the code to call on the image.

First time programmer so it might look idiotic. Teach me, oh guru's...

Upvotes: 0

Views: 13474

Answers (2)

Amar
Amar

Reputation: 695

<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>

Upvotes: 1

Carls Jr.
Carls Jr.

Reputation: 3078

Learn the basics first on how to properly call the javascript function and how to change the properties.

See my sample demo. Hope you will learn from it.

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>

Upvotes: 2

Related Questions