Dispalying a message after displaying an animated GIF

Question

The following is my code, and I already have the animated GIF working but I need a message or another picture to be displayed after 5 seconds when the GIF is disabled. Thanks in advance

JavaScript

<script type= "text/javascript">
function show() {
  document.getElementById("processing").style.display="block";
  setTimeout("hide()", 5000);  // 5 seconds
}

function hide() {
  document.getElementById("processing").style.display="none";
}
</script>

HTML

<p>
  <input type="button"  id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" />
</p>
 <div id="processing" style="display:none;"><img src="images/processing.gif" id= "processing" alt="Processing transaction!" /></div>

Answer 1

First, you have two items with the same id processing. Change the id from the image, and add a div with a message in it

<p>
  <input type="button"  id = "submit" value="Make Transfer" class="submit_button" onclick= "show()" />
</p>
<div id="processing" style="display:none;">
  <img src="images/processing.gif" id="processing-img" alt="Processing transaction!" />
  <div id="processed-msg" style="display:none">Finished processing </div>
</div>



function hide() {
  document.getElementById("processing-img").style.display="none";
  document.getElementById("processing-msg").style.display="block";
}