Can I have "alt text" on the images in the Image Thumbnail Viewer II script

[chavlene]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: In order to make this page accesible, I need to add "alt text" to the images that transition with this script. I added it to the code but it doesnt seem to be working -- can anyone advise?

Thanks

Ilene

[jscheuer1]

I am taking you at your word when you say 'for accessibility'. This means so that a screen reader (for the visually impaired) or a browser with images disabled will show/use the alt attribute. This does not mean that there would be a sort of 'tooltip' onmouseover of the images - though some browsers may also do this with alt, it is supposed to be done only by title.

Now, there are various ways, here's what I would suggest. Give your trigger images (the thumbnails) alt attributes and modify the script as shown:

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var alttext=linkobj.firstChild&&linkobj.firstChild.getAttribute&&linkobj.firstChild.getAttribute('alt')? 'alt="'+linkobj.firstChild.getAttribute('alt')+'" ' : '' //Get alt attr
var imageHTML='<img src="'+imagepath+'" '+alttext+'style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+des . . .

This will make the thumbnail's alt attribute be the larger image's alt attribute.

[chavlene]

it seems to have "broken" the effect.....

Can you think of a reason why?

[jscheuer1]

Ooops, I should have tested it. I made a typo and an error in script logic. The added line should be like so:

var alttext=linkobj.firstChild&&linkobj.firstChild.getAttribute&&linkobj.firstChild.getAttribute('alt')? 'alt="'+linkobj.firstChild.getAttribute('alt')+'" ' : '' //Get alt attr

The altered line:

var imageHTML='<img src="'+imagepath+'" '+alttext+'style="border-width: 0" />' //Construct HTML for enlarged image

was fine the way I had it (at least I got one line right).

[chavlene]

Well, it is not broken anymore but I still cant get my "alt text" to show up.

If you can think of anything else, please let me know

Thanks again for your help

Ilene

[chavlene]

This will make the thumbnail's alt attribute be the larger image's alt attribute.
Maybe this is part of my problem ---
I am using a textual link.....

[jscheuer1]

OK, well it gets a little trickier then, especially if you want your HTML code to validate. An easy solution is to enclose your text in a span with alt attribute:

<a href="bulb.gif" rel="enlargeimage::mouseover" rev="loadarea"><span alt="Large Image Alt Text">Link Text</span></a>

But, that won't validate as HTML. It will work fine though. If you need/want it to validate, use title (in the script):

var alttext=linkobj.firstChild&&linkobj.firstChild.getAttribute&&linkobj.firstChild.getAttribute('title')? 'alt="'+linkobj.firstChild.getAttribute('title')+'" ' : '' //Get title for alt attr

and in the span:

<span title="Large Image Alt Text">Link Text</span>

[chavlene]

Thanks

I think the span will work great with what we are trying to accomplish!

[chavlene]

Can I ask one more question

In the comment section it states:

In the above case, you're telling the script to load the enlarged image in the DIV (or some other element) on the page with ID="loadarea". Obviously remember to actually give this DIV such an ID declaration. If you want the enlarged image to be hyperlinked, extend the above declaration a delimiter (: followed by the desired URL:

rev="loadarea::http://www.dynamicdrive.com"

Can I have this new URL launch in a new window??

[jscheuer1]

Edit the script again, this time go after this line (addition red):

imageHTML='<a href="'+dest+'" target="_blank">'+imageHTML+'</a>'

from the function:

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'" target="_blank">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
this.featureImage= . . .