Reload Alternate Image - Source Code - JsMadeEasy.com

Metachecker.net

|

TrafficChecker.net

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial


Reload Alternate Image
In a few seconds this image will change color! 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).
In a few seconds this image will turn red!


Insert into <HEAD>
<script language="JavaScript"> <!-- Hide from old browsers // Copyright © 1999 Doug Popeney // Created by Doug Popeney (easyjava@easyjavascipt.com) // JavaScript Made Easy!! - http://www.easyjavascript.com function startTime(){ var time= new Date(); hours= time.getHours(); mins= time.getMinutes(); secs= time.getSeconds(); closeTime=hours3600+mins60+secs; closeTime+=3; Timer(); } function Timer(){ var time= new Date(); hours= time.getHours(); mins= time.getMinutes(); secs= time.getSeconds(); curTime=hours3600+mins60+secs if(curTime>=closeTime) reloadimg(); else window.setTimeout("Timer()",1000) } function reloadimg(){ document.img1.src = "images/linkon.gif" } // --> </script>

Insert into <BODY>
<Body onLoad="startTime()"> <img src="YOUR FIRST ORIGIONAL IMAGE" name="img1">

Other Options
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"> <!-- Hide from old browsers function startTime(){ var time= new Date(); hours= time.getHours(); mins= time.getMinutes(); secs= time.getSeconds(); closeTime=hours3600+mins60+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=hours3600+mins60+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. <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"> <!-- Hide from old browsers function startTime(){ var time= new Date(); hours= time.getHours(); mins= time.getMinutes(); secs= time.getSeconds(); closeTime=hours3600+mins60+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=hours3600+mins60+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">