How do you add alt tags to these two scripts??/

[funtyme]

Does anyone know how to add alt tags to the images in these two scripts?

Script: Flexi slideshow
http://www.dynamicdrive.com/dynamici...flexislide.htm

And...

Script: Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

Thank You!
Hugs...Sandy

[jscheuer1]

That's two different questions, for the second script, thumbII, add this function at the end of the script in the head:

function addAlt(imgobj, imgindex){
var alts=new Array();
alts[0]="Kissing Fools"
alts[1]="Seated Woman"
alts[2]="The Dog Lovers"
imgobj.getElementsByTagName('img')[0].alt=alts[imgindex]
}

Add this line (red part) to the function modifyimage(loadarea, imgindex):

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
addAlt(imgobj, imgindex);
return false
}
}

Notes: Most browsers will not give a "tooltip" from an alt tag when hovering over an image, only IE does that, if you want all browsers to see the 'tip', use:

imgobj.getElementsByTagName('img')[0].title=alts[imgindex]

instead.

[jscheuer1]

OK, you can do pretty much the same things with the flexi show, same bit about using title here as opposed to alt for cross browser 'tooltips'. Find function rotateimages() and add our new function (green) before it:

function addAlt(imgobj, imgindex){
var alts=new Array();
alts[0]="Kissing Fools"
alts[1]="Seated Woman"
alts[2]="The Dog Lovers"
imgobj.getElementsByTagName('img')[0].alt=alts[imgindex]
}

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if(document.getElementsByTagName)
addAlt(crossrotateobj, currentslide);
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

Also, add the part in red.

[funtyme]

imgobj.getElementsByTagName('img')[0].title=alts[imgindex]


John..You are the best!!!

I am not sure where or what to do with the above.
Where do I insert it??? I got the tags to work in the
flex slide show but only in IE. I am not sure what to do
with the above though.

Thank you for the great help!!!

Hugs...Sandy

[jscheuer1]

imgobj.getElementsByTagName('img')[0].title=alts[imgindex]


John..You are the best!!!

I am not sure where or what to do with the above.
Where do I insert it??? I got the tags to work in the
flex slide show but only in IE. I am not sure what to do
with the above though.

Thank you for the great help!!!

Hugs...Sandy

As I said before but, perhaps could have been clearer, use it instead of the line:

imgobj.getElementsByTagName('img')[0].alt=alts[imgindex]

IE will use title if it is present as the default 'tip' as well so this will work in virtually all browsers.

[funtyme]

John...That worked!!!

Thank you!! I still have to try out the other script yet.

I was wondering if, seeing that a line like that allowed alts to display in the script using other browsers, if there is any line like it to put somewhere in a regular page to make it's alt tags show in other browsers??? It would be nice to have my regular page's images alt tags show in other browsers too.

Thank you so much for your kind help!!!!

PS..Do you have a site? I would love to see it!

Hugs...Sandy

[jscheuer1]

OK, the alt attribute is only for images and according to the w3c specification, only for alternate content on an image, for when it isn't displayed. IE ignores this and uses it like the title attribute when the title attribute is missing. The title attribute can be used wth other tags like div, a and p as wel as the img tag.

<img title="My Dog" src="dog.jpg">

[funtyme]

I was thinking more like a line in the HEAD that
would cover all images on a page. Might be just
wishful thinking but would be great!

Hugs...Sandy

[jscheuer1]

You can use a script but, that will leave out non-javascript enabled browsers:

<script type="text/javascript">
if (document.images)
for (var i=0;i<document.images.length;i++)
if (document.images[i].alt)
document.images[i].title=document.images[i].alt
</script>

This would actually go just above the closing body tag, or execute as an onload fuction:

<script type="text/javascript">
if (document.images)
onload=function(){
for (var i=0;i<document.images.length;i++)
if (document.images[i].alt)
document.images[i].title=document.images[i].alt
}
</script>

Either way this is not such a hot idea. It would be better to just do a search and replace with a text editor on the page -

Seach for:

alt=

replace with:

alt="" title=

This could be safely done globally on the HTML portion of he page in most cases.