Replace image with another image, then replace again after timeout - Javascript

Question

I'm trying to do the following:

onClick, replace image1 with image2, then after 5 seconds, replace image 2 with image 1 again.

Image 1 is replaced with image 2, but my problem is that it doesn't revert back after the timeout.

Here is my code:

<img id="loadimg" style="display:none;" src="images/Loader.gif" width="140" height="30" />

<script type="text/javascript" language="javascript">

function showLoad(){
    document.getElementById('Generate1').src=document.getElementById('loadimg').src;
    setTimeout(showCode(), 5000);
}

function showCode(){
    document.getElementById('loadimg').src=document.getElementById('Generate1').src;
}

</script>

 <td colspan="3" rowspan="3"><img src="images/BUTTON.gif" alt="" name="Generate1" width="168" height="40" id="Generate1" onClick="showLoad()"></td>

Thanks for any help.

Jovan Perovic · Accepted Answer · 2012-05-05 14:01:32Z

1

That is because old images is being "run-over" by new one. You could do something like this:

var pathToGenerateImg = "..."; // path to generate
var pathToLoadImg = "..."; // path to load img

function showLoad(){
    document.getElementById('Generate1').src = pathToLoadImg;
    setTimeout(showCode, 5000);
}

function showCode(){
    document.getElementById('Generate1').src = pathToGenerateImg ;
}

In this case you only need single <IMG> container (with id="Generate1") as all paths are stored in variables.

answered May 5, 2012 at 14:01

Jovan Perovic

20.2k5 gold badges47 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VisioN · Accepted Answer · 2012-05-05 13:59:03Z

1

You have to address the same image with id Generate1 and store initial image src in temp value (e.g. var image):

var image = document.getElementById('Generate1').src;

function showLoad(){
    document.getElementById('Generate1').src = document.getElementById('loadimg').src;
    setTimeout(showCode, 5000);
}

function showCode(){
    document.getElementById('Generate1').src = image;
}

answered May 5, 2012 at 13:59

VisioN

146k35 gold badges287 silver badges291 bronze badges

Comments

Ry- · Accepted Answer · 2012-05-05 13:59:20Z

1

You don't want to run showCode and pass the result to setTimeout, you want to pass the function itself as an argument to setTimeout so it can be called back:

setTimeout(showCode, 5000);

Also, when you assign document.getElementById('loadimg').src to document.getElementById('Generate1').src, doing the reverse won't change anything. You need to keep the original in a variable. You may as well keep your elements in variables, too:

var Generate1 = document.getElementById('Generate1');
var loadimg = document.getElementById('loadimg');
var originalSrc = Generate1.src;

function showLoad() {
    Generate1.src = loadimg.src;
    setTimeout(showCode, 5000);
}

function showCode() {
    loadimg.src = originalSrc;
}

answered May 5, 2012 at 13:59

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Collectives™ on Stack Overflow

Replace image with another image, then replace again after timeout - Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related