?
Solved

Captions for Images

Posted on 2000-03-18
6
Medium Priority
?
257 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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 100 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

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

770 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