Solved

Captions for Images

Posted on 2000-03-18
6
247 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

808 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