Results 1 to 4 of 4

Thread: Applying a style to description text in Thumbnail Viewer

  1. #1
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Applying a style to description text in Thumbnail Viewer

    1) Script Title: Image Thumbnail Viewer II

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

  2. #2
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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;
    }

  3. #3
    Join Date
    Sep 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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_SlateCree...deshowTEST.asp

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •