PDA

View Full Version : Can I have "alt text" on the images in the Image Thumbnail Viewer II script



chavlene
03-19-2007, 03:26 PM
1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/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:confused:

jscheuer1
03-19-2007, 04:01 PM
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
03-19-2007, 04:14 PM
it seems to have "broken" the effect.....

Can you think of a reason why?

jscheuer1
03-19-2007, 04:29 PM
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
03-20-2007, 05:24 PM
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:confused:

chavlene
03-20-2007, 05:25 PM
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
03-20-2007, 06:34 PM
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
03-20-2007, 08:26 PM
Thanks

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

chavlene
03-20-2007, 08:47 PM
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
03-21-2007, 04:08 AM
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= . . .