SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image descriptions

    I've created my first website and I have a page of thumbnails which link to larger images. My problem is that I want to add a description at the bottom of the larger images but I've no idea how to do this or whether it can be done. Can anyone help?

  2. #2
    SitePoint Wizard LiquidReflex's Avatar
    Join Date
    Aug 2003
    Location
    Minnesota
    Posts
    1,861
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It can be done, but the method to accomplish it will vary dependin on how you created the page. Did you use CSS and Div's? Did you use tables? Maybe a link to the page you created would help us determine the best method to accomplish it?
    Kevin Hauge : Modern Leaf Design : Follow Us on Facebook
    Client Axis v.08 - client / project management script

  3. #3
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I have used CSS for the site. For the thumbnails I have a list inside the content div.

    The link is http://www.heyshamweb.co.uk/thumbnails.html

  4. #4
    SitePoint Wizard LiquidReflex's Avatar
    Join Date
    Aug 2003
    Location
    Minnesota
    Posts
    1,861
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ah, well looking at your site it appears that your thumbnails only link to the image itself. To put captions underneith them (or anything else on the page for that matter) you will need to create a page to display the image and show the image that way. So instead of linking to a JPG, you're linking to another HTML page.

    Something like this:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Image Gallery - Photographs of Heysham</title>
    <meta http-equiv="content-type"
        content="text/html; charset=iso-8859-1" />
    
    <meta name="author" content="David Gray" />
    <meta name="keywords" content="Heysham, Heysham images, Heysham photographs, St Patrick's Chapel images, St Peter's Church images, rock-hewn graves" />
    <meta name="description" content="Images of Heysham" />
    <meta name="date" content="01-09-2006" />
    <meta name="copyright" content="David Gray" />
    
    <link rel="stylesheet" type="text/css" href="heysham.css" />
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    
    </head>
    <body>
    <div id="header">
    	<h1>HEYSHAM - a history</h1>
    </div>
    
    <div id="content">
      
    <h2>Images of Heysham</h2>
    <p><strong>Here is the detail image:</strong></p>
    
    <img src="gallery/heysham001.jpg" alt="Heysham Village" /><br />
    Heysham Village
    	
     </div>
     <div id="nav">
    	<ul>
    		<li><a href="index.html">Home</a></li>
    		<li><a href="history.html">Heysham History</a></li>
    		<li><a href="stpeter.html">St. Peter's Church</a></li>
    		<li><a href="stpat.html">St. Patrick's Chapel</a></li>
    		<li><a href="references.html">References</a></li>
    		<li><a href="contact.html">Contact Me</a></li>
    	</ul>
    	<h2>Links</h2>
    	<ul>
    		<li><a href="http://www.htnw.co.uk/HHA.html">Heysham<br />Heritage Association</a></li>
    		<li><a href="http://www.heyshamonline.co.uk/">Heysham Online</a></li>
    		<li><a href="http://www.heyshamparish.org.uk/">Parish of Heysham</a></li>
    	</ul>
    </div>
    </body>
    </html>
    Then change your thumbnail links to reflect the new files, linking to the detail image and not the JPG.
    Kevin Hauge : Modern Leaf Design : Follow Us on Facebook
    Client Axis v.08 - client / project management script

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tip, I'll try it.

  6. #6
    SitePoint Enthusiast Vivid Image's Avatar
    Join Date
    Sep 2006
    Location
    Michigan
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think, if you know any, a javascript for the purpose of opening the image on the same page would be benificial for ya. Take a look at this free javascript.
    LightBox

    I really liked how this one works.
    Vivid Image Productions

    Imagination Reloaded


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
  •