html click button display/hide picture?

Question

So, I am new to html and say I have 2 buttons named "Show Picture 1" and "Show Picture 2"

I want to be able to display Picture1 after clicking the button "Show Picture 1".

I also want to be able to display Picture2 where Picture1 was (and hide Picture1 if Picture1 was being displayed).

What is the code I should write to allow this to happen?

My code so far for displaying picture 1:

<style type="text/css">
.show{display:block;}
.hide{display:none;}
</style>
<script type="text/javascript">
function showImg()
{
var obj=document.getElementById('Picture1');
obj.className = 'show';
}
</script>



<center>
<img id="Picture1" src=Picture1.jpg" class="hide">
<input type="button" onclick = "showImg()" value= "Picture1">
</center>

Thanks

score 1 · Accepted Answer · answered May 12 '13 at 04:51

1

/// if ur looking to toggle image try this simple code////

<script type = "text/javascript">
        function pic1()
        {
            document.getElementById("img").src = "picture 1 source";
        }
        function pic2()
        {
            document.getElementById("img").src ="picture 2 source";
        } </script>





    <img src = "" id = "img"/> <input type="button" value="Show Picture
    1" onclick="pic1()"/> <input type="button" value="Show Picture 2"
    onclick="pic2()"/>

answered May 12 '13 at 04:51

Sridhar

32
3

Thanks for that, I'm using it right now but I was wondering how to add alternate text incase the image could not be displayed? – user2278906 May 12 '13 at 08:09
to display text if image not found or make image source to null? – Sridhar May 12 '13 at 18:43
for example "image could not be loaded" if the image doesn't/can't load – user2278906 May 15 '13 at 02:39
– Sridhar May 17 '13 at 10:30

html click button display/hide picture?

1 Answers1