Results 1 to 9 of 9

Thread: Fadeshow - alt tags?

  1. #1
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fadeshow - alt tags?

    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!

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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?

  3. #3
    Join Date
    Jan 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Alt Tags added to fadeshow script

    Alt Tags added to fadeshow script

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

    Code:
    /***********************************************
    * 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()
    }

  6. #6
    Join Date
    Feb 2008
    Location
    Southern California
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Sample FadeShow with Alt tags?

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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):

    Code:
    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:

    Code:
    //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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Feb 2008
    Location
    Southern California
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #9
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default whoops...

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

    thanks,

    robert

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •