Image Thumbnail Viewer II Descriptions

[rebsy]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem:
Hi. This is my first time using JavaScript so I apologize if this question is stupid. Here is my problem.

I am having trouble getting descriptions to appear with the larger image.
I am using Image Thumbnail Viewer II - so far I have it working so that if I mouse over a thumbnail a large image appears to the right. I would like to have a description or caption appear under the large image and I have attempted to use the alt tags but the text does not appear.

I have left the beginning of the script as is:

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

In the body of my webpage, here is an example of a link I am using.

<a href="images/vest1.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img src="images/vest1small.jpg" alt="Vest" width="100" border="0"></a><br>

Isn't the alt="Vest" the part that should become the description?

Please let me know if you can help.
Thank you!
Rebecca

[rebsy]

Hi, so I figured out the title thing - you add a title attribute to the link, not an alt attribute to the thumbnail.

Anyhoo...How can I control the font of the caption that shows up?
Thank you,
Rebecca

[jscheuer1]

How can I control the font of the caption that shows up?

To answer that, it would be helpful for you to consider that the caption will be in the load area configured for the larger image. So given:


<a href="images/vest1.jpg" rel="enlargeimage::mouseover" rev="loadarea"> . . .

The larger image and its caption will show up in an element with the id of loadarea. So in your stylesheet (preferred) or inline for the loadarea element you can set style, including font-family, and if you like, any other style property value pairs that would be valid and applicable. Example using a stylesheet entry:


#loadarea {
font-family: verdana, arial, sans-serif;
}

Example using inline style:


<div id="loadarea" style="font-family: verdana, arial, sans-serif;"></div>

[rebsy]

Thanks John! Totally worked!
-Rebecca