Reload Alternate Image



In a few seconds this image will turn orange! This script would work great if you want an origional image to load first (maybe a black and white) and then a final image to load over it (the color version of the B&W).

<!--To use this script copy this part into your <head></head> tag. You need to edit the image location where it says "YOUR FIRST RELOADED IMAGE" and "YOUR FIRST ORIGIONAL IMAGE" -->

<script language="JavaScript">
function startTime(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=3;  // If you want it to wait loading longer or shorter adjust this number accordingly.
        Timer();
}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if(curTime>=closeTime)
                reloadimg();
        else
                window.setTimeout("Timer()",1000)
}
function reloadimg(){
	document.img1.src = "YOUR FIRST RELOADED IMAGE"
}
</script>


<!-- Now put this image any where in your page Body section of your page-->

<img src="YOUR FIRST ORIGIONAL IMAGE" name="img1">




If you want to add more images, you need to add this line to the top script. 

	document.img2.src = "YOUR SECOND RELOADED IMAGE"

Your top script should now look like this. 

<script language="JavaScript">
function startTime(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        closeTime=hours*3600+mins*60+secs;
        closeTime+=3;  // If you want it to wait loading longer or shorter adjust this number accordingly.
        Timer();
}

function Timer(){
        var time= new Date();
        hours= time.getHours();
        mins= time.getMinutes();
        secs= time.getSeconds();
        curTime=hours*3600+mins*60+secs
        if(curTime>=closeTime)
                reloadimg();
        else
                window.setTimeout("Timer()",1000)
}
function reloadimg(){
	document.img1.src = "YOUR FIRST RELOADED IMAGE"
	document.img2.src = "YOUR SECOND RELOADED IMAGE"
}
</script>


Now here is the code for the second image. 

<img src="YOUR SECOND ORIGIONAL IMAGE" name="img2">