Results 1 to 6 of 6

Thread: ALT text on images in slide show

  1. #1
    Join Date
    Mar 2010
    Location
    Chama, New Mexico
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default ALT text on images in slide show

    ALT text for slideshow images

    I am a code Double Dummy. I am using Expression Web 2 for my sites. My customer wants to see the Alt text when she puts her mouse on the image. She is using I8 for a browser.

    The web page with the slideshow

    http://www.ctsrr.com/indexnew.html

    The 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):
    seqslides[0]=["http://www.ctsrr.com/images/homepage/slideshow/zz0000.jpg", ""]
    seqslides[1]=["http://www.ctsrr.com/images/homepage/slideshow/zz0001.jpg", ""]
    seqslides[2]=["http://www.ctsrr.com/images/homepage/slideshow/zz0002.jpg", ""]
    seqslides[3]=["http://www.ctsrr.com/images/homepage/slideshow/zz0003.jpg", ""]
    seqslides[4]=["http://www.ctsrr.com/images/homepage/slideshow/zz0004.jpg", ""]
    seqslides[5]=["http://www.ctsrr.com/images/homepage/slideshow/zz0005.jpg", ""]
    seqslides[6]=["http://www.ctsrr.com/images/homepage/slideshow/zz0006.jpg", ""]

    //Set pause between each image display (2000=2 second):
    var slidedelay=3000

    //Set how many images to show at once (must be less than total # of images above):
    var slidestoreveal=2

    //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=""

    //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+'" 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>
    Last edited by Wacky roger; 03-16-2010 at 03:11 PM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Change:
    Code:
    seqslides[0]=["http://www.ctsrr.com/images/homepage/slideshow/zz0000.jpg", ""]
    seqslides[1]=["http://www.ctsrr.com/images/homepage/slideshow/zz0001.jpg", ""]
    seqslides[2]=["http://www.ctsrr.com/images/homepage/slideshow/zz0002.jpg", ""]
    seqslides[3]=["http://www.ctsrr.com/images/homepage/slideshow/zz0003.jpg", ""]
    seqslides[4]=["http://www.ctsrr.com/images/homepage/slideshow/zz0004.jpg", ""]
    seqslides[5]=["http://www.ctsrr.com/images/homepage/slideshow/zz0005.jpg", ""]
    seqslides[6]=["http://www.ctsrr.com/images/homepage/slideshow/zz0006.jpg", ""]
    To:
    Code:
    seqslides[0]=["http://www.ctsrr.com/images/homepage/slideshow/zz0000.jpg", "", "ALT TEXT HERE"]
    seqslides[1]=["http://www.ctsrr.com/images/homepage/slideshow/zz0001.jpg", "", "ALT TEXT HERE"]
    seqslides[2]=["http://www.ctsrr.com/images/homepage/slideshow/zz0002.jpg", "", "ALT TEXT HERE"]
    seqslides[3]=["http://www.ctsrr.com/images/homepage/slideshow/zz0003.jpg", "", "ALT TEXT HERE"]
    seqslides[4]=["http://www.ctsrr.com/images/homepage/slideshow/zz0004.jpg", "", "ALT TEXT HERE"]
    seqslides[5]=["http://www.ctsrr.com/images/homepage/slideshow/zz0005.jpg", "", "ALT TEXT HERE"]
    seqslides[6]=["http://www.ctsrr.com/images/homepage/slideshow/zz0006.jpg", "", "ALT TEXT HERE"]
    And:
    Code:
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
    To:
    Code:
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" alt="'+theimg[2]+'">'
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    Wacky roger (03-16-2010)

  4. #3
    Join Date
    Mar 2010
    Location
    Chama, New Mexico
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Nile, just thanks is not enough.

    How about

    OH My, Oh YES Nile is SUPPERDUPPERTASTIC.

    Thank you very much.

  5. #4
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Haha glad to help! But I just noticed something, change:
    Code:
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" alt="'+theimg[2]+'">'
    To:
    Code:
    imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" alt="'+theimg[2]+'" title="'+theimg[2]+'">'
    It makes it work in Firefox too.
    Jeremy | jfein.net

  6. #5
    Join Date
    Mar 2010
    Location
    Chama, New Mexico
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    You be RIGHT again.

    Thanks a bunch

    Wacky roger

  7. #6
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Glad to help you! Your welcome!

    It seems your topic is solved... Please set the status to resolved.. To do this:
    Go to your first post ->
    Edit your first post ->
    Click "Go Advanced" ->
    Then in the drop down next to the title, select "RESOLVED"
    Jeremy | jfein.net

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
  •