Solved

Captions for Images

Posted on 2000-03-18
6
242 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 8

Expert Comment

by:jbirk
Comment Utility
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
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now