Alternative Text

[laura_skelton]

1) Script Title:
Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:
First I would just like to say Great Website! Ok now onto the query

I would like to add alternative text to the images used within this slideshow for accessability. How do I go about changing the code so I can do this. Next to each image entry I can specify a Link and target but I am not able to add an alernative text.

Any help would be greatly appreciated

Thanks
Laura

[jscheuer1]

That functionality is already built into:

http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

Or you can edit U-Fade here:


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img alt="Slide Show Image" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Or, if you want separate alt attributes for each image:


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img alt="'+this.theimages[picindex][3]+'" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

If you do that, you will need to include a fourth field for each image in the array:


var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", "", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new", ""] //image with link and target syntax

That's where you can put the alt text:


fadeimages[0]=["photo1.jpg", "", "", "My Favorite Image"] //plain image syntax

Now, in IE an img tag with an alt set and no title attribute, will show the alt text as a title 'tool tip'. If you want to prevent that, add:


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img title="" alt="'+this.theimages[picindex][3]+'" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

Or, if you want all browsers that support title to use the alt text as a title 'tool tip':


fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img title="'+this.theimages[picindex][3]+'" alt="'+this.theimages[picindex][3]+'" src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

[laura_skelton]

Thank you so much!!

It works perfectly.

Your answer was very comprehensive and gave me all the options I needed.