<html>
<head>
</head>
<body>
<img src="blue hills.jpg" name="slide" width="350" height="300"/>
<script type="text/javascript">
var image1=new Image()
image1.src="Sunset.jpg"
var image2=new Image()
image2.src="Winter.jpg"
var image3=new Image()
image3.src="Blue hills.jpg"
var image4=new Image()
image4.src="turf.jpg"
var image5=new Image()
image5.src="white.jpg"
var step=1
function slideit()
{
<!--if browser does not support the image object,exit.-->
if(!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if(step<5)
step++
else
step1
setTimeout("slideit()","1500")
}
slideit()
</script>
</body>
</html>
willjohanz -3 Newbie Poster
NormR1 563 Posting Sage Team Colleague
Try asking on an HTML forum. This one is for java programming.
ckchaudhary 5 Newbie Poster
the javascript code is doing the following:
1. storing 5 images as variables
2. replaces an image with the said images every 1.5 seconds one by one
Troy III 272 Posting Pro
OK Here is some explaining of it:
var image1=new Image() //creating a DOM Image Element
image1.src="Sunset.jpg" //assigning the source & preloading the image file(s)...
var step=1 // creating a globally accessible counter variable;
if(!document.images) // checking for images coll., existence; duck-converting the find into Boolean (true / false)
return; // canceling the function if find turns false
document.images.slide.src=eval("image"+step+".src") // feeding the slide src attribute with the preloaded image loc., in steps.
if(step<5) step++ //checking if step var hasn't exceeded the max num., of images & incrementing by 1.
else step=1 //otherwise reset to starting value
setTimeout("slideit()","1500") // setting the timer of this function call
slideit() // initiating, actual function call
without spoiling the idea of the given approach completely, I would've rephrased it this way:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
<img src="blue hills.jpg" name=slide width=350 height=300>
<script>
onload=slideit;
var src="sunset.jpg, winter.jpg, blue hills.jpg, turf.jpg, white.jpg".split(", "), images=[], step=0;
for(x in src)images[x]=new Image, images[x].src=src[x];
function slideit(){
if(!document.images)return;
document.images.slide.src=images[step].src;
if(step<4)step++;
else step=0;
setTimeout(slideit,1500);
}
</script>
</body>
</html>
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.