...

View Full Version : How do I make an automatic slideshow of images wtihout using the name attribute?



ampulator00
06-30-2004, 07:39 AM
How do I make an automatic slideshow of images wtihout using the name attribute for the img tag?

glenngv
06-30-2004, 07:45 AM
You can use the index position of the image in the images collection if you know it. The problem with that is if you insert an image before the slideshow image, the code will not work anymore. Using the name attribute is better.

ampulator00
06-30-2004, 07:48 AM
Thanks, but the name attribute for the img tag is unfortunately not XHTML 1.1 Strict. BTW, when you say image position, you mean z-index, right? How would I use it?

glenngv
06-30-2004, 07:58 AM
when you say image position, you mean z-index, right? How would I use it?

No.

document.images[0].src = theSlide;

That means the img tag is the first image in the document. index is zero-based.



but the name attribute for the img tag is unfortunately not XHTML 1.1 Strict.

Then use id and then document.getElementById instead of document.images

document.getElementById('theId').src = theSlide;

ampulator00
06-30-2004, 08:02 AM
Thanks! the ID thing worked! BTW, is it possible to use an class instead of an ID?

glenngv
06-30-2004, 08:14 AM
You can't reference the image using getElementById without an id attribute.

If you're concerned with applying CSS to the image, then you can use this:

img#theId {
border:none;
}

but if you want to reuse it in other img tags, you can use class names.

img.theClass {
border:none;
}
...
<img id="theId" class="theClass" src="first.jpg" alt="" />


Regarding js refs, see the sticky in this forum.

jamescover
06-30-2004, 08:16 AM
Images array:


<script>
<!--

myImgs = new Array()
myImgs[0]="image1.gif";
myImgs[1]="image2.gif";
myImgs[2]="image3.gif";
myImgs[3]="image4.gif";
myImgs[4]="image5.gif";
myImgs[5]="image6.gif";
imgNum=0;
imgCt=myImgs.length;
function showImgs(){
if(document.images){
if(document.images[0].complete){
imgNum++;
if(imgNum==imgCt){
imgNum=0;
}
}
}
document.images[0].src=myImgs[imgNum];
}
//-->
</script>

<body onload="javascript:setInterval('showImgs()',1000);">

<img name="slideshow" src="Image1.gif" width="150" height="150" border=0>


-james

ampulator00
06-30-2004, 08:18 AM
Thanks, Too!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum