Adding Alt Tags to an Image Slideshow

[carteray]

Hi,

I found some code from hotscripts.com for an image slideshow with some neat features. The only thing missing however is the alt tag. I thought based upon a previous question that the Alt[0] = series would go under my images[0] = code, but it doesn't seem to work. Can someone take a quick look?

Thanks!

Here's the code I'm using:

<!-- configurable script -->
<script language="JavaScript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["home1_072506.jpg", "www.yahoo.com", "Test Slide"];
theimage[1]=["home2_070506.jpg", "www.google.com", "Test Slide 3"];
theimage[2]=["home3_061406.jpg", "www.ask.com", "Test Slide 3"];

///// Plugin variables

playspeed=4000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//set the first slide
SetSlide(0);

//autoplay
PlaySlide();
}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[i][0];

}


//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}


//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}


</script>

[jscheuer1]

First of all, do you want an alt attribute or do you want a title attribute? The alt acts like a title in IE giving a tool tip description onmouseover. All other browsers require the title attribute for this. In all browsers, including IE, the alt attribute provides alternate content when the image is unavailable or if images are not being rendered by the browser (for example a text reader).

Due to IE's odd behavior, it is generally best to use an empty title attribute with an image if only the true alt behavior is desired.

In any case, it is hard to say what to do exactly with this script but, this has a good chance of working:

//switch the image
document.images.imgslide.src=theimage[i][0];
document.images.imgslide.alt=theimage[i][2];

If you want true alt behavior, hard code the image tag to title="". If you want just one alt attribute for the entire show, hard code it to the image tag. If what you really want is tool tip type behavior:

//switch the image
document.images.imgslide.src=theimage[i][0];
document.images.imgslide.title=theimage[i][2];

[carteray]

Thanks for responding. I need the alt tag to appear so that the code can be 508 compliant. Style wise, the title option that was provided with the code didn't work very well.

Thanks again and I will let you know how it works.

[carteray]

John,

I added the alt line in the code but did not see the alt tag appear. Can you give me an example within the code, with the complete alt tag strings for one of the images I have listed? I think I am missing something.

Thanks!

[jscheuer1]

In any case, it is hard to say what to do exactly with this script but, this has a good chance of working:

Well, that's what I was talking about. I can't see the image tag, only the part of the scrip that you chose to post. If there is a hard coded image tag with the name attribute of 'imgslide' all you need to be compliant is to set its alt attribute to "" -

<img name="imgslide" alt="">

If you want more help, I will need to see the entire script and markup. Preferably, a link to a demo of what you have so far.