if (!document.images)

javascript

Solution

Put this tutorial down! It is (a) ancient...

if (!document.images)
   return

This is doing feature-sniffing for the `images` collection, an old-fashioned way of getting hold of `<img>` elements. Every JavaScript-capable browser since Netscape 3 has supported that array, so it reveals a script of 1996-odd vintage.

...and (b) terrible.

document.images.SlideShow1.src=eval("image"+slide+".src");

This is the mark of someone who really doesn't have a clue what they are doing. You have always been able to access object properties using `[]` syntax:

document.images.SlideShow1.src=window['image'+slide].src;

So there never was any need to use the slow, dangerous, awful method of creating a JavaScript expression in a string and `eval`ing it - even by 1996 standards, this is poor.

But even so, accessing variables by name off `window` is typically questionable.

ETA:

would anyone show me how to make a good image slideshow

Well, I don't know about the best slideshow - I'm sure someone will step in to promote a favourite existing library, but we can certainly improve the code you've got as an example.

So holding a series of objects in separate numbered variables is generally a sign that what you really want is an array:

# List of image paths inside Images/
#
var paths= [
    'Foam2012/Misty.gif', 'Foam2012/Foamy.gif', 'Foam2012/17.gif', 'Foam2012/16.gif', 'Foam2012/2.gif',
    'Oxjam2012/Rainbow.gif', 'Oxjam2012/17.gif', 'Oxjam2012/9.gif', 'Oxjam2012/2.gif',
    'RagDay2012/GasMask.gif', 'RagDay2012/22.gif', 'RagDay2012/21.gif', 'RagDay2012/20.gif', 'RagDay2012/16.gif', 'RagDay2012/6.gif', 'RagDay2012/5.gif', 'RagDay2012/4.gif', 'RagDay2012/1.gif',
    'UV2012/17.gif', 'UV2012/14.gif', 'UV2012/9.gif', 'UV2012/7.gif', 'UV2012/6.gif',
];

# Preload images
#
var images= [];
for (var i= 0; i<paths.length; i++) {
    var image= new Image();
    image.src= 'Images/'+paths[i];
    images.push(image);
}

# Rotate image every 1.5s
#
var imagei= 0;
setInterval(function() {
    imagei= (imagei+1) % images.length;
    document.getElementById('SlideShow1').src= images[imagei].src;
}, 1500);

There are other things you could do to make this better - for example, it would probably be better to have all the images as `<img>` tags in the page so that their content is visible to non-JavaScript agents such as search engines. You could then show and hide them using the `display` CSS style.

or simply direct me to a good tutorial?

It's a problem. I haven't looked for a while but standards are typically poor.

Although I'm not a fan of jQuery, you might find some of the tutorial material that uses it helpful as at least it tends to be written in a more modern way.

Problem

I have been using JavaScript tutorials to help me implement some JavaScript in my college assignment. I have therefore used one to help me create an image slideshow and it contains an if statement that looks like the one below. ``` if (!document.images) return document.images.SlideShow1.src=eval("image"+slide+".src ``` However I am not quite sure what it is doing especially the `(!document.images)` part. EDIT Also as I can see that I have made a bad choice with this tutorial would anyone show me how to make a good image slideshow or simply direct me to a good tutorial? This is all of the code I am currently using ``` <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="Images/Foam2012/Misty.gif" var image2=new Image() image2.src="Images/Foam2012/Foamy.gif" var image3=new Image() image3.src="Images/Foam2012/17.gif" var image4=new Image() image4.src="Images/Foam2012/16.gif" var image5=new Image() image5.src="Images/Foam2012/2.gif" var image6=new Image() image6.src="Images/Oxjam2012/Rainbow.gif" var image7=new Image() image7.src="Images/Oxjam2012/17.gif" var image8=new Image() image8.src="Images/Oxjam2012/9.gif" var image9=new Image() image9.src="Images/Oxjam2012/2.gif" var image10=new Image() image10.src="Images/RagDay2012/GasMask.gif" var image11=new Image() image11.src="Images/RagDay2012/22.gif" var image12=new Image() image12.src="Images/RagDay2012/21.gif" var image13=new Image() image13.src="Images/RagDay2012/20.gif" var image14=new Image() image14.src="Images/RagDay2012/16.gif" var image15=new Image() image15.src="Images/RagDay2012/6.gif" var image16=new Image() image16.src="Images/RagDay2012/5.gif" var image17=new Image() image17.src="Images/RagDay2012/4.gif" var image18=new Image() image18.src="Images/RagDay2012/1.gif" var image19=new Image() image19.src="Images/UV2012/17.gif" var image20=new Image() image20.src="Images/UV2012/14.gif" var image21=new Image() image21.src="Images/UV2012/9.gif" var image22=new Image() image22.src="Images/UV2012/7.gif" var image23=new Image() image23.src="Images/UV2012/6.gif" //--> </script> </head> <body> <img id="SlideShow1" style="padding-bottom: 5px" src="Images/Foam2012/Foamy.gif" width="350px" height="300px" alt="Image Slideshow"/> <script type="text/javascript"> <!-- var slide = 1 //Declares a variable called slide which equals 1 function slideit(){ if (!document.images) return document.images.SlideShow1.src=eval("image"+slide+".src") if (slide<23) slide++ else slide = 1 //call function "slideit()" every 1.5 seconds setTimeout("slideit()",1500) } slideit() //--> </script> </body> ```

Original source