Results 1 to 4 of 4

Thread: Click pic to reveal a larger picture to the left w/copy

  1. #1
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Click pic to reveal a larger picture to the left w/copy

    I have a two-col. .css layout for a product specification page. In the left column, will be pictures of product (small thumbs). When one is clicked, it brings up a large picture of it in the right column along with copy, bullet copy and an illustration.

    Cllick on another thumb and that info in the right col. leaves to be replaced with another large product pic, copy, etc.

    Any thoughts?

    Thanks for your time and help.

    Greg Pechauer

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

  3. #3
    Join Date
    Apr 2008
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    John,

    Thanks, guess I should have did a search first.

    Looking at the .css which is the "loadarea" .div, I presume for copy, all I need do is a <p></p> or what ever to include a copy block, bullet copy, etc?

    I'm using this as a list of product images on a two col. page:

    1. Thumbs in left col. and right col. to reveal each new large pic with product copy. Kind of a "specification sheet" that keeps loading information into the same .div when a different thumb is clicked.

    Right?

    Thanks for your time and help!
    Greg

  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

    You place your copy in the link's title attribute. To prevent it from also appearing at the mouse pointer when the user hovers over the thumbnail image, you can give the thumbnail image a short descriptive title attribute.

    Just make sure your target division (loadarea in the demo) has plenty of room in it for the copy.
    - John
    ________________________

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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    gpechauer (04-24-2008)

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
  •