Alternating images [Archive]

Click to See Complete Forum and Search --> : Alternating images

RealisticGraphics

Sep 15th, 2000, 09:52 PM

Not difficult:

<script language="javascript">
//Set up a variable to hold the current image.
var curImg

function animate(tImg){
//Check tImg to find out what the image is displayed
if(tImg == "On.jpg"){

//Set the currently displayed image
curImg = "Off.jpg"}
else{
curImg = "On.jpg"}
//Set img1 to be the current image
document.img1.src = curImg;
//set a timer up, mine change about every second
//1000 milliseconds = about 1 second.
window.setTimeout("animate(curImg)", 1000);
}

</script>

<body onLoad="animate('Off.jpg')">
<img src="" name="img1">

In addition the the above you may want to add some preloading code for the images. Let me know if you need anything else.

Michael

Sep 16th, 2000, 03:58 AM

Thanks for that - it worked fine.

The images I want to swap are small gifs (<1k) so preloading is not an issue here.

However, I am sure that it would be useful to know for future reference how to preload larger graphics files, so what is the code to do this please?

RealisticGraphics

Sep 16th, 2000, 08:50 AM

Well here is a way I came up with that makes preloading lots of images a breeze:

<script language="JavaScript">
//Pre Load Images
//By Realistic Graphics
var Img = new Array()
var tPath = "img/jpg/comp/"

function PreImg(){
Img[0] = "about2.jpg"
Img[1] = "advert2.jpg"
Img[2] = "contact2.jpg"
Img[3] = "service2.jpg"
Img[4] = "soft2.jpg"
Img[5] = "web2.jpg"

for(i=0; i < Img.length; i++){
var tImg
tImg = "img" + i
tImg = new Image()
tImg.src = tPath + Img[i]
}
}
</script>
<body onLoad="PreImg()">

Let me know if you need anything else.

Michael

Sep 17th, 2000, 09:33 AM

Thanks. It is now filed away in my "odds and sods" folder!!!

Can't think of anything else I need at the moment. Thanks for your help.