Solved

Captions for Images

Posted on 2000-03-18
6
245 Views
Last Modified: 2010-04-09
I am a beginning HTML user, doing it from scratch, so pardon me if this is too simple of a question.  But, is there a tag or property I can use to give a caption to an image?  If so, what is it, and if not, what technique do you suggest?

Thanks, Gregg
0
Comment
Question by:borleymsgs
6 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 2632421
If you specify an alt property this will pop up a 'tooltip' like caption for a few seconds in 4.0+ browsers.  You can't really control the delays or how long it stays or how it looks, only the text in it.  If you want to have more control, then a layer and some javascript code can be used...  but that may get a little complicated for a beginner.

Try out the alt property first and see if that will do.  If not, I or someone here can help with a layered solution.

An example:
<IMG src="someimage.gif" name="someimage" width="100" height="100" alt="This is really some image!">

-Josh
0
 

Author Comment

by:borleymsgs
ID: 2632469
I know about the ALT property and use it, but I was hoping for something that would stay on the page.  Since I am using tables, I am wondering about having a table cell directly under the cell containing the image.  I haven't played with that yet and am fearful of formatting problems.  What do you think?

I plan on diving into Java next week, so maybe that is the best method.  I know nothing about layers, though.

Thanks, Gregg
0
 
LVL 1

Expert Comment

by:kelli
ID: 2632795
Tables would be the easiest way to do what you're loking for, putting the caption under the the image.  It's really a simple thing to do once you understand the concept.

www.htmlgoodies.com has a good tutorial on tables that might be of some help to you.

Good luck!
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 8

Expert Comment

by:jbirk
ID: 2633206
Yeah, if you want the caption to always be there, then tables are the answer.  If however you only want the caption to appear when the mouse moves over the image, the alt tag or layers will be needed.

Note that JavaScript and Java are two distinct entirely different languages with very little in common except that they both work on the web, and both have C-like syntax...

Here is an example of a tables caption for an image:

<TABLE>
  <TR>
    <TD><IMG src="image.gif" width="100" height="100"></TD>
  </TR>
  <TR>
    <TD align="center">A caption for the image</TD>
  </TR>
</TABLE>

The basic structure is <TR> tags for defining rows, and <TD> tags for defining columns.  The tables are always defined in row major order, so you define each column in a row before starting the next row...

By default a table has some spacing introduced, and no visible border around the table cells.  You can override this by speciying values:
<TABLE cellpadding="1" cellspacing="1" border="1">

Also you can specify background colors for each individual cell or the table as a whole OR images, but images can be testy on Netscape especially with nested tables.

<TD bgcolor="blue">
<TD background="bg.gif">

I hope this gets you on your way:)
If you are interested in the layers method, I can post some code for it, but it will take a little while to get working...

-Josh
0
 

Accepted Solution

by:
Ironwolf earned 50 total points
ID: 2637286
The table structure jbrink posted should work, but you can also use the caption tag on tables:

<table>
  <caption>This caption </caption>
  <tr>
    <td><img src="pic.jpg"></td>
  </tr>
</table>

This is then the caption for the entire table, so if you wanted the picture and caption to appear inside another table, you could just put the above table as a field in another table:

<table>
  <tr>
    <td>This is one field</td>
    <td>
      <table>
        <caption>A table inside a table</caption>
        <tr>
          <td><img src="pic.jpg"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Then you would have the caption over the picture in the subtable.

Also, in the image tag, you can use a 'title':

<img src="pic.jpg" title="print this">

so that when the mouse hovers over the image, this text is diplayed.

'alt' may also do this, but its actual purpose it to display text in the box if the picture file cannot be found. You may use both a 'title' and an 'alt', then alt text would be displayed if the picture is not found and the title would be displayed when the mouse is over the picture or the alt text.

Hope these are what you're looking for,
-IW
0
 
LVL 3

Expert Comment

by:davlun20080
ID: 2638915
Use <caption valign=bottom>
to put the caption below the table and make sure that your caption is short enough to fit on a single line above your table for the best appearance.  Otherwise the title will wrap and can throw off the alignment in the other cells (not always an issue).

davlun
0

Featured Post

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question