title: html click button display/hide picture?
body: <p>So, I am new to html and say I have 2 buttons named "Show Picture 1" and "Show Picture 2"</p>
  
  <p>I want to be able to display Picture1 after clicking the button "Show Picture 1".</p>
  
  <p>I also want to be able to display Picture2 where Picture1 was (and hide Picture1 if Picture1 was being displayed). </p>
  
  <p>What is the code I should write to allow this to happen?</p>
  
  <p>My code so far for displaying picture 1:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  .show{display:block;}
  .hide{display:none;}
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  function showImg()
  {
  var obj=document.getElementById('Picture1');
  obj.className = 'show';
  }
  &lt;/script&gt;
  
  
  
  &lt;center&gt;
  &lt;img id="Picture1" src=Picture1.jpg" class="hide"&gt;
  &lt;input type="button" onclick = "showImg()" value= "Picture1"&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p>Thanks</p>