Display a page element for a set period of time

quick question. I am trying to use either javascript, jquery, or php to make it so when I click a link, it replaces a sta开发者_StackOverflow社区tic image on my page with another image, for 15 seconds, then reverts back to the original image. What would be the best way to go about this?

You could do a simple timeout for this:

$('#myLink').click(function() {
  $('#myImg').attr('src', 'newImg.jpg');
  setTimeout(function() { $('#myImg').attr('src', 'oldImg.jpg'); }, 15000);
});

Alternatively, if you wanted a fade, have the other image absolutely positioned, like this:

<div>
 <img id="tempImg" src="tempImg.jpg" style="position:absolute; display:none; z-index: 2;" />
 <img src="oldImg.jpg" />
</div>

Then jQuery like this:

$('#myLink').click(function() {
  $('#tempImg').fadeIn().delay(15000).fadeOut();
});

Make sure the images have the same dimensions(for looks, this is optional), the temp image will fade in on top of the static image, wait 15 seconds, then fade out.