I'm trying to replace an image with another after 10 seconds. I'd be ok with replacing the image, using HTML, CSS, or JS, after 10 seconds, or by using any of them to automatically go to the next page, which could be set up to look exactly the same. You'll get a better idea after you see the page, my soon to be, 404 page. My Goal would be to replace the image, with another here After 10 seconds. Anyone know how I can do this, hopefully somewhat simply.

5 answers

0
points
This was chosen as the best answer

You could use a redirect and change pages, just put this in the head of your 404:

<meta http-equiv="refresh" content="10;url=boom.htm">

where the URL is the next page in the sequence and 10 is the number of seconds you want between each page change:

Answered about 7 years ago by Tony Crockford
  • The major weakness of this method is that the refresh timer starts immediately the head of the page is downloaded. I've seen pages on 10-15 second refreshes vanish before they have completed loading. A javascript solution can avoid this problem by only firing on page completion. Richard Grevers about 7 years ago
1
point

Put an ID on the element:

<img id="main-image" src="images/404.png" alt="" style="border: 0px solid ; width: 200px; height: 235px;"/>

Then in javascript

<script>
var image = document.getElementById("main-image");
image.src = "images/404_timeout.jpg";
</script>
Answered about 7 years ago by Paul Tarjan
1
point

You'll need to use the setIntverval() function of JavaScript to change the image or a meta refresh to go to a new page.

With JavaScript, you'll need to grab the image using the id of the image and then change the source ever 10000ms, as follows:

<img src="images/404.png" id="imgChange" />
<script type="text/javascript">
var imgNumCount = 0;
var imgChange = setIntverval('Change404Img()', 10000);
function Change404Img() {
    imgNumCount ++; // increment the number so we know what image to use next
    document.getElementById('imgChange').src = 'images/404-' + imgNumCount + '.png'; // change the image src
    if (imgNumCount >= 5) {
        // clear the interval timer now that we have changed the image 5 times
        clearInterval(imgChange);
    }
}
</script>

The meta example is as follows. Add the following to each page, where the URL is the next page in the sequence and 10 is the number of seconds you want between each page change:

<meta http-equiv="refresh" content="10;url=boom.htm" />

One other tip on the website: I'm not sure if it's the final version or not, but I would strongly recommend not using red text on a blue background (or the reverse). Colours that are complementary/opposite (such as red/blue or yellow/purple) are very hard to read on top of each other, especially on computer screens.

Answered about 7 years ago by Darryl Hein
0
points

I got all that done, but how do i set the time.

<

script type="text/javascript">
function var image()
{
var t=setTimeout(var image = document.getElementById("main-image");
image.src = "images/404_timeout.jpg";
)",10000)
}

That looks like It should kinda work but i'm not getting anywhere. Thanks

Answered about 7 years ago by Michael Fitzpatrick
0
points

Thanks all of you! I couldn't exactly figure out how to switch the image, I'll probably take that up again someday but for now the Timed page redirect works great.

Answered about 7 years ago by Michael Fitzpatrick