PDA

View Full Version : Resolved ALT text on images in slide show



Wacky roger
03-15-2010, 08:45 PM
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>

Nile
03-15-2010, 11:07 PM
Change:


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:


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:


imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'

To:


imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" alt="'+theimg[2]+'">'

Wacky roger
03-16-2010, 01:45 AM
Nile, just thanks is not enough.

How about

OH My, Oh YES Nile is SUPPERDUPPERTASTIC.

Thank you very much.

Nile
03-16-2010, 02:19 AM
Haha glad to help! But I just noticed something, change:


imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'" alt="'+theimg[2]+'">'

To:


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.

Wacky roger
03-16-2010, 02:58 AM
You be RIGHT again.

Thanks a bunch

Wacky roger

Nile
03-16-2010, 11:40 AM
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"