Make Images Disappear after X Amount of Seconds

Using JavaScript

[wfernley]

Hey everyone,

I have a web page that will be displaying a few linked images. I want the images to disappear off the web page after 60 seconds. Is it possible to do this using JavaScript?

Thanks in advance for your help!

Wes

[Trace]

<script type="text/javascript">window.setTimeout("document.getElementById('something').style.display='none';", 3000); </script>

<img id="something" src="image.jpg" width="400" height="300" border="0" alt="" />

That will make the image disappear after 3 seconds. Change the 3000 to 60000 to make it disappear after 60 seconds.

[wfernley]

Thanks for the quick reply :)

That works great.

Now considering these images are linked. Is it possible to remove the link and keep the image? Basically after 3 seconds they cannot click the link anymore.

Thanks again!

[Dabrowski]

The simplest way, using Trace's above example would be:

<script type="text/javascript">window.setTimeout("document.getElementById('something').parentNode.href = '';", 3000); </script>

Note we're now finding the <img>, and fiddling with it's direct parent. If it's parent is not an <a> this will fail.

By setting href to '' I believe IE at least won't display a pointy hand icon anymore.

[Drag_Racer]

using Dabrowski's method will allow the page to be refreshed which will add the original link back to the document if clicked on in some browsers, others may no longer display properly...

a good solution may be to wrap your link in a div or span tag. then rewrite the contents of that tag, such as

<span id="someID"><a href=""><img src="my.gif"></a></span>

<script type="text/javascript">
window.setTimeout("document.getElementById('someID').innerHTML='<img src=\"my.gif\">';", 3000);
</script>