Display a page element for a set period of time

Question

Hello, quick question. I am trying to use either javascript, jquery, or php to make it so when I click a link, it replaces a static 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?

Answer 1

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.