Applying a style to description text in Thumbnail Viewer

[slyredfox]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: I'd like to be able to appy a style to the description text that appears below the image. Is this possible? Here are the two parts to my question...

I want to add this:
.Caption {
font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #59412C; line-height: 16px; margin-top: 15px
}

To this:
<a href="/IMAGES_FEATURES/SC_KITCHEN_Image2.jpg" title="I WANT TO BE ABLE TO APPLY THE STYLE TO THIS TEXT - THANK YOU" rel="enlargeimage::mouseover">

Lastly ... See how in my .Caption style above I have "margin-top: 15px" — My hope is that this will add a bit of space between image and description. Do you think that will work?

Thanks!!

[slyredfox]

I'm still looking for an answer to my question above....

But, I'm one step closer. I figured out (as I read through some other posts) that I need to apply the style not to this...

<a href="/IMAGES_FEATURES/SC_KITCHEN_Image1.jpg" title="This copy for image ONE is not meant to be read." rel="enlargeimage::mouseover" rev="loadarea" onMouseOver="MM_swapImage('TN1','','IMAGES_FEATURES/SC_KITCHEN_TN1_ON.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="IMAGES_FEATURES/SC_KITCHEN_TN1_OFF.jpg" name="TN1" width="40" height="40" border="0" id="TN1" style="margin-bottom: 5px; margin-left: 10px;"></a>

But, instead to the <div> as in...

<div id="loadarea" style="width:340px; height: 220px" class="Slideshow"></div>

But the text looks bad - and there's no gap as I had hoped. ?? Not sure why.

Oh, I combined two styles I had (.Caption + .Background) into a new style called .Slideshow (even though this isn't a slideshow)...

.Slideshow {
font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 11px; font-style: normal; font-weight: normal; color: #59412C; line-height: 16px; margin-top: 15px; background: url(IMAGES_FEATURES/SC_KITCHEN_Image1.jpg) no-repeat;
}

[slyredfox]

OK. I got it (I think) lol...

This appears to work in Firefox (so, it should work in every other browser - I h8 FF). Here it is:

<!-- For the table that holds the <div> I add a default image -->

<td width="340" align="left" valign="top" style="background: url(IMAGES_FEATURES/SC_KITCHEN_Image1.jpg) no-repeat;"><!--webbot bot="HTMLMarkup" startspan -->

<!-- I apply the style directly to the <div> itself -->

<div id="loadarea" style="width:340px; height: 220px; font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; color: #59412C; line-height: 16px;"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="11987" --></td>

<!-- I then add a <br> to the title="" section to get a bit of space -->
<!-- Quite frankly, I'm really surprised that worked -->

<td width="50" valign="top">
<a href="/IMAGES_FEATURES/SC_KITCHEN_Image1.jpg" title="<br>This copy for image ONE is not meant to be read."

<!-- Lastly, I added a mouse over effect to the thumbnails -->

rel="enlargeimage::mouseover" rev="loadarea" onMouseOver="MM_swapImage('TN1','','IMAGES_FEATURES/SC_KITCHEN_TN1_ON.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="IMAGES_FEATURES/SC_KITCHEN_TN1_OFF.jpg" name="TN1" width="40" height="40" border="0" id="TN1" style="margin-bottom: 5px; margin-left: 10px;"></a><br>
<a href="/IMAGES_FEATURES/SC_KITCHEN_Image2.jpg" title="<br>This copy for Image TWO is not meant to be read." rel="enlargeimage::mouseover" rev="loadarea" onMouseOver="MM_swapImage('TN2','','IMAGES_FEATURES/SC_KITCHEN_TN2_ON.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="IMAGES_FEATURES/SC_KITCHEN_TN2_OFF.jpg" name="TN2" width="40" height="40" border="0" id="TN2" style="margin-bottom: 5px; margin-left: 10px;"></a><br>
<a href="/IMAGES_FEATURES/SC_KITCHEN_Image3.jpg" title="<br>This copyfor Image THREE is not meant to be read." rel="enlargeimage::mouseover" rev="loadarea" onMouseOver="MM_swapImage('TN3','','IMAGES_FEATURES/SC_KITCHEN_TN3_ON.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="IMAGES_FEATURES/SC_KITCHEN_TN3_OFF.jpg" name="TN3" width="40" height="40" border="0" id="TN3" style="margin-bottom: 5px; margin-left: 10px;"></a></td>

<!-- This is pretty ugly coding - but, it works, lol. -->

Here's a link to the "finished" page (just placeholder stuff for now)...

http://64.78.8.174/CLIENTS_SlateCreek/Features_SlideshowTEST.asp

And, actually, thanks for the help (I found the answers by picking a bit of info from about 20 different posts - hehe).

[jscheuer1]

Yeah that is ugly. I just added this in the head:


<style type="text/css">
#loadarea {
font-family:sans-serif;
}
#loadarea img {
padding-bottom:1em;
}
</style>