46 users online (0 members and 46 guests)  


  Results 1 to 3 of 3

Related

  1. Expandable Thumbnails, how to?    Forum: Graphics Forum
    Replies: 1
  2. Replies: 0
  3. Replies: 2
  4. Tables in IE 6.0 and 5.0    Forum: CSS Forum
    Replies: 3
  5. Replies: 2
  1. #1
    fishon1965's Avatar
    New User

    Status
    Offline
    Join Date
    May 2011
    Posts
    2

    Tables and Thumbnails

    I am using Frontpage 2003. I'd like to create a table with 2 columns and multiple rows where for example, column A has 4 rows and Column B has one "cell" which actually consists of a merge of rows 1 thru 4. In column A there are 4 thumbnail pictures, one thumbnail per row. What I need this to do is display the full size picture for each thumbnail in the "cell" in column B when the thumbnail is clicked on. So far, everything I have tried has opened up a new window/webpage to display the full size picture. I need the full size picture to be displayed on the same page, to the right hand side of the thumbnails.

    Can any one give me some information on this question? Is what I am trying to do possible and if so, what do I need to do?

    Thanks,
    Steve

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Tables and Thumbnails

    Hi there fishon1965,

    and a warm welcome to these forums.

    I, personally, do not code tables for page layout purposes.
    The reasons for this can be found within the following links...

    Here is a example of more modern methodology...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>css img changer</title>
    
    <style type="text/css">
    body {
        background-color:#eee;
     }
    #container {
        width:432px;
        padding:5px;
        border:3px double #999;
        background-color:#fff;
        margin:50px 0 0 50px;
     }
    #holder {
        width:98px;
        height:300px;
        border:1px solid #999;
        margin:0;
        padding:0; 
        list-style-type:none;
        background-color:#eee;
     }
    li {
        position:relative;
        float:left;  
        margin:18px 0; 
     }
    .thumb {
        display:block;
        width:40px;
        border:0;
        margin:auto;
     }
    a {
        display:block;
        width:98px;
        height:40px; 
        outline:none;
     }
    a:hover {
        background-color:#fff;
        color:#000;
     }
    a .pic { 
        position:absolute;
        display:none;
        border:1px solid #999;
     }
    a:hover .pic {
        display:block;
        left:128px;
     }
    a:hover #pic0 { 
        top:-18px;
     }
    a:hover #pic1 { 
        top:-94px;
     }
    a:hover #pic2 { 
        top:-170px;
     }
    a:hover #pic3 { 
        top:-246px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <ul id="holder">
     <li><a href="#"><img class="thumb" src="ballr.gif" alt=""><img class="pic" id="pic0" src="ballr.gif" alt=""></a></li>
     <li><a href="#"><img class="thumb" src="ballb.gif" alt=""><img class="pic" id="pic1" src="ballb.gif" alt=""></a></li>
     <li><a href="#"><img class="thumb" src="ballo.gif" alt=""><img class="pic" id="pic2" src="ballo.gif" alt=""></a></li>
     <li><a href="#"><img class="thumb" src="ballg.gif" alt=""><img class="pic" id="pic3" src="ballg.gif" alt=""></a></li>
    </ul>
    
    </div>
    
    </body>
    </html>
    

  3. #3
    fishon1965's Avatar
    New User

    Status
    Offline
    Join Date
    May 2011
    Posts
    2

    Re: Tables and Thumbnails

    Dear Mr. Coothead,

    Thanks for the links and example. First of all I want to read through all of the information in the links. I've created several websites using Frontpage 2003 and always thought using tables was a great way to organize and put structure in each of my websites layouts. But alas, a new methodology. My almost bald head, grey hair, grey beard and 20 years of writing code on the mainframe are all feeling the pain!!

    Next, I will experiment with the example you provided. No doubt, I am sure I will be back with more questions.

    Thanks again, you have been the first person and website that has been willing to take the time and offer a solution. I appreciate that.

    Steve