Results 1 to 6 of 6

Thread: multiframe slide show add alt & title tag to image

  1. #1
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default multiframe slide show add alt & title tag to image

    1) Script Title: Multiframe slide show

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...frameslide.htm

    3) Describe problem: Need to know how to add alt & title tags to images

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Use this modified script and modify the parts in red accordingly:
    Code:
    <script type="text/javascript">
    
    /***********************************************
    * MultiFrame Image Slideshow script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var seqslides=new Array()
    //Set Path to Image plus optional URL ("" for no URL):
    //the 3rd item is the alt and the 4th are the title, modify accordingly
    seqslides[0]=["image1.gif", "http://www.dynamicdrive.com", "alt1", "title1"]
    seqslides[1]=["image2.gif", "http://www.javascriptkit.com", "alt1", "title1"]
    seqslides[2]=["image3.gif", "http://www.google.com", "alt1", "title1"]
    seqslides[3]=["image4.gif", "http://www.yahoo.com", "alt1", "title1"]
    seqslides[4]=["image5.gif", "http://www.google.com", "alt1", "title1"]
    
    //Set pause between each image display (2000=2 second):
    var slidedelay=2000
    
    //Set how many images to show at once (must be less than total # of images above):
    var slidestoreveal=3
    
    //Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
    //"" for none (or horizontal):
    var slideseparater="<br>"
    
    //Set optional link target to be added to all images with a link:
    var optlinktarget="secwindow"
    
    //Set image border width:
    var imgborderwidth=0
    
    //Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
    //Change 0.2 to 0 to completely hide image when it's dimmed:
    var opacityvalues=[0.2,1]
    
    ///No need to edit beyond here///////////
    
    function processimgcode(theimg){
    var imghtml=""
    if (theimg[1]!="")
    imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" alt="'+theimg[2]+'" title="'theimg[3]'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
    if (theimg[1]!="")
    imghtml+='</a>'
    return imghtml
    }
    
    var curslide=1 //var to track current slide (total: slidestoreveal)
    var curimgindex=0 //var to track current image (total: seqslides.length)
    var isfirstcycle=1 //boolean to indicate whether this is the first cycle
    
    if (document.getElementById){
    for (i=0;i<slidestoreveal;i++)
    document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)
    curimgindex=slidestoreveal
    illuminateslide(0,opacityvalues[1])
    }
    
    function illuminateslide(slideindex, amt){
    var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
    if (slideobj.filters)
    slideobj.filters.alpha.opacity=amt*100
    else if (slideobj.style.MozOpacity)
    slideobj.style.MozOpacity=amt
    }
    
    function displayit(){
    if (curslide<slidestoreveal){
    if (!isfirstcycle)
    changeimage(curslide)
    illuminateslide(curslide, opacityvalues[1])
    curslide++
    }
    else{
    isfirstcycle=0
    for (i=0;i<slidestoreveal;i++)
    illuminateslide(i, opacityvalues[0])
    changeimage(0)
    illuminateslide(0, opacityvalues[1])
    curslide=1
    }
    }
    
    function changeimage(slideindex){
    document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
    curimgindex++
    if (curimgindex>=seqslides.length)
    curimgindex=0
    }
    
    if (document.getElementById)
    setInterval("displayit()",slidedelay)
    
    
    </script>
    
    <p style="font: normal 12px Arial">This free script provided by<br>
    <a href="http://www.dynamicdrive.com">Dynamic Drive</a></p>
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks, but cannot get this new script to work.

    With original script was as able to change this line only to (from a previous post) :

    Code:
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" title="'+theimg[2]+'">'
    This works for title tag, but I can't figure out what to add to get "alt" tag to work.
    Last edited by james438; 10-04-2012 at 05:03 PM. Reason: format code for readability

  4. #4
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you, but I cannot get this to work.

    I was able to get "title" tag to work by making this change (from another post) and changing "alt" to "title".
    Code:
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" alt="'+theimg[2]+'">'
    Since I have lots of images and "title" tags already in place, would like to just update this line if possible.
    Last edited by james438; 10-04-2012 at 05:03 PM. Reason: format code for readability

  5. #5
    Join Date
    Jun 2012
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I think this is working:
    Code:
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" alt="'+theimg[2]+'"title="'+theimg[3]+'">'
    Last edited by james438; 10-04-2012 at 05:37 PM. Reason: format code for readability

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    How are you trying the updated script? It's working fine for me.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

Similar Threads

  1. Image Slide Show - Book Flip Slide Show
    By Peppy in forum Dynamic Drive scripts help
    Replies: 13
    Last Post: 01-17-2007, 04:11 PM
  2. Multiframe Slide Show with Random Images
    By demel in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-23-2006, 04:52 AM
  3. My Multiframe Slide show isn't right in IE
    By garyG in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-10-2005, 03:19 PM
  4. MultiFrame slide show IE
    By junky013 in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-18-2005, 03:51 AM
  5. MultiFrame slide show HELP
    By dokkendude in forum JavaScript
    Replies: 2
    Last Post: 01-13-2005, 11:08 PM

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
  •