Fadeshow - alt tags?

[Michael23]

I am using this script
http://www.dynamicdrive.com/dynamici...nslideshow.htm

How can I insert alt tags for the images?
It would be just fine, and simpler, if they all have the same alt="whatever"... any ideas how I can set this up in the existing code?

I tried adding the alt tag to the document.write section, alongside the img src,etc, but as far as I can tell it isnt working.

GREAT script by the way!

[ddadmin]

If the alt text can be the same for all images, and your main goal is just to add a tooltip to the slideshow itself, the easiest way is actually just to add a "title" attribute to the DIV tag that gets output using document.write(). Or are you looking to accomplish something else?

[Michael23]

umm.... I think that would work.
For seo and validation purposes I want every image on the page to have an 'alt tag'.

Would adding the title to the DIV do the same thing?
If so, what is the proper syntax?

thanks!

[jscheuer1]

For validation purposes, depending upon the DOCTYPE, you either do not need any alt attribute for a script created image tag or at most, you would need one wherever the code for the image tag is in the script. To prevent it from messing up the appearance of the page, you can use an empty alt attribute:

alt=""

Running the page through the validator will tell you where (at least on what line number), if at all, the alt attribute is required for validation.

[robert_speer]

Alt Tags added to fadeshow script

3rd element in the image array is where you stick the alt tag info

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
*
* Mods:
* 1-25-07 -RHS- added changing alt tags on 3rd element in the image array
*
*  function fadeshow($picArray='default'){  // this is a php function to echo out the same arguments for fadeshow each time.  If you do this and someone wants you to change each slideshow you can do it in one place instead of many
	echo '
	<script type="text/javascript">
		//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
		new fadeshow('.$picArray.', 573, 440, 0, 7000, 1, "R") 
	</script>
	';
* }
***********************************************/
 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed

// if all the paths start out the same this makes it easier to c&p & maintain the code
var path = "/images/slideshow/"  

//path to image, link, window to open in
fadeimages1[0]=[path+"image1.jpg", "link.htm", "_blank", 'alt tag content'] 
fadeimages1[1]=[path+"image2.jpg", "link1.htm", "_target", 'alt tag content'] 
fadeimages1[2]=[path+"image3.jpg", "link2.htm", "_new", 'alt tag content']



// for each slideshow create a new array, you don't have to include all the arguments, you can do this many times or just one time
var accessories=new Array()
accessories[0]=[path+"imageB0.jpg"]
accessories[1]=[path+"imageB1.jpg"]
accessories[2]=[path+"imageB2.jpg"]


var fadebgcolor="white"
 
////NO need to edit beyond here/////////////
 
var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers
 
var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all
 
function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}
 
var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')
 
if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}
 
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]+'">'
// RHS 1/25/06 added the alt thing, probably broke it
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px" alt="'+this.theimages[picindex][3]">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}
 
 
fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}
 
fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}
 
 
fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

[Fancy]

Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)

I have tried the mods (to add alt tags) for the slideshow with no luck. The original works great for me at: http://www.grossmont.edu/earthsciences But whenever I try to add the modifications to add alt tags, the program will not work. Obviously I am doing something wrong and was wondering if anyone had a fadeshow up and going with alt tags working so I could follow the example?

Thanks!
Fancy
http://geology110.com/110.html

[jscheuer1]

This mod was for an apparently older version (1.5) of this script and doesn't work anyway, it has a typo in it. The current version (1.51) only adds the ability to fade in more browsers though, so the modifications suggested here would still work with it. 1.51 (available on the current official DD demo page for this script) should be used for all implementations of this script and its mods.

The typo in the mod given in this thread is here (highlighted and corrected):

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]+'">'
// RHS 1/25/06 added the alt thing, probably broke it
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px" alt="'+this.theimages[picindex][3]+'">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}

The above function may be used in place of the one of the same name in version 1.51 of this script and the array(s) expanded as mentioned:

//path to image, link, window to open in
fadeimages1[0]=["image1.jpg", "link.htm", "_blank", 'alt tag content'] 
fadeimages1[1]=["image2.jpg", "link1.htm", "_target", 'alt tag content'] 
fadeimages1[2]=["image3.jpg", "link2.htm", "_new", 'alt tag content']

BTW, it isn't an alt tag, it is an alt attribute.

[Fancy]

Works perfectly now... "thank you" doesn't adequately express the appreciation for the forum support I've received. All California State college websites must soon comply with accessibility guidelines and W3C compliance restrictions. I was not sure I could make our page comply with the fadeshow in place but it now it does. Your other title should be "hero". Thank you John

[robert_speer]

Good catch, and I'm glad to hear somebody found my little hack useful...once it finally worked

thanks,

robert