If (! Document.images)
I am using JavaScript tutorials to help me implement JavaScript in my college. So I used one to help me create an image slideshow and it contains an if statement that looks like below.
if (!document.images)
return
document.images.SlideShow1.src=eval("image"+slide+".src
However, I'm not really sure what it does, especially the part (!document.images)
.
EDIT
Also as I can see that I made a bad choice with this tutorial, can anyone show me how to make a good slideshow or just direct me to a good tutorial? This is all 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>
source to share
Post this tutorial! It is (a) ancient ...
if (!document.images)
return
This makes sniffing a collection the images
old-fashioned way of holding items <img>
. Every browser that supports JavaScript, since Netscape 3 supports this array, so it shows a 1996 script with an unusual crop.
... and (b) terrible.
document.images.SlideShow1.src=eval("image"+slide+".src");
This is a sign of someone who really doesn't know what they are doing. You can always access the properties of an object using the syntax []
:
document.images.SlideShow1.src=window['image'+slide].src;
So there has never been a need to use the slow, dangerous, horrible way to create a JavaScript expression in a string and eval
that - even by 1996 standards, it is bad.
Even so, access to variables by name is window
usually questionable.
ETA:
will anyone show me how to make a good image slideshow
Well, I don't know about a better slideshow - I'm sure someone will come in to promote your favorite existing library, but we can of course improve the code you have as an example.
Thus, holding a series of objects in separate numbered variables is usually 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 it better - for example, it would be better to have all images as tags <img>
on the page so that their content is visible to non-JavaScript agents such as search engines. Then you can show and hide them using display
CSS style .
or just direct me to a good tutorial?
This is a problem . I haven't searched for a while, but standards tend to be poor.
While I am not a fan of jQuery, you may find some of the tutorial material in which it is useful, since at least it is generally written in a more modern way.
source to share
Internet Explorer There might be a browser that doesn't have an "images" property for document objects, so the test just sees if the slideshow will work. A test like:
if (!something.property_name)
JavaScript has a (slightly risky, depending on the circumstances) way to check if an object has a property with a specific name. In this case, it is not risky: if the document object has an "images" property, then it will be a list of (possibly empty) images ( <img>
DOM elements) in the document. If this property is not present then this test will return true
.
(edit - IE has a property, although the documentation omits it.)
The consensus here is that you shouldn't test it. I also think you might be wondering if what you really want is a slideshow covering all the images on the page. It seems to me that this is unlikely to be realistic; real pages have images for icons, headers, logos, widgets, etc. There are better APIs for finding images of interest for your purposes.
source to share
if (!document.images)
check if exists images
in document (but not null) because
- Different browsers have different names for their attributes
- The page may not have an image
There document.images
seems to be no reason to check for the existence of an attribute: http://www.w3schools.com/jsref/coll_doc_images.asp
source to share