Figures

The FIG element is used for figures. Subsequent elements will be flowed around the figure if there is sufficient room. This behaviour is disabled when the align attribute is center (the default) or justify.

Figure overlays provide for more effective use of caching as small changes to a figure in a subsequent document incur only the penalty of downloading the overlays and not the larger base figure, as the latter is already in the cache.

The figure description text is intended to convey the content of the figure for people with non-graphical user agents, while the figure caption and credit are rendered on both graphical and non-graphical user agents. The FIG element improves on the IMG element by allowing authors to use markup for the description text. The content model allows authors to include headers, which is appropriate when the headers are part of the image data. It also allows graphical hypertext links to be specified in the markup and interpreted by the user agent rather than the server.

The anchor elements in the figure description text play a dual role: Non-graphical user agents show conventional hypertext links, while for graphical user agents, the same anchor elements specify graphical hypertext links, with the SHAPE attribute designating the hotzones. This is designed to simplify the task of authors writing for both audiences. Hopefully, the FIG element will help to combat the tendency for authors to forget about people limited to terminal access or the visually impaired relying on text to speech, as the new element forces you to write description text to define the graphical hypertext links.

For some applications the hotzones are dynamically defined by programs running on the server. HTML 3.0 allows clicks and drags to be passed to the server with the IMAGEMAP attribute. Hotzones may also be specified as part of the graphics data format e.g. as in VRML. Hotzones in the FIG element take precedence over hotzones in the graphics data, which in turn take precedence over passing events to a server imagemap program.

Hotzones in overlay graphics data take precedence over hotzones in figure data. Similarly, the imagemap attribute in overlays takes precedence over the imagemap attribute for the figure. For a group of overlapping overlays the precedence is determined by the order the OVERLAY elements appear within the FIG element. Later overlays take precedence over earlier ones.

Examples

Photographic image with caption and credits:

<FIG SRC="nicodamus.jpeg">
  <CAPTION>Ground dweller: <I>Nicodamus bicolor</I>
  builds silk snares</CAPTION>
  <P>A small hairy spider light fleshy red in color with a brown abdomen.
  <CREDIT>J. A. L. Cooke/OSF</CREDIT>
</FIG>

Company home page:

<FIG SRC="mainmenu.gif">
 <H1>Access HP from Hewlett Packard</H1>
 <P>Select between:
 <UL>
  <LI><A HREF="guide.html" SHAPE="rect 30,200,60,16">Access Guide</A>
  <LI><A HREF="about.html" SHAPE="rect 100,200,50,16">About HP</A>
  <LI><A HREF="guide.html" SHAPE="rect 160,200,30,16">News</A>
  <LI><A HREF="guide.html" SHAPE="rect 200,200,50,16">Products</A>
  <LI><A HREF="guide.html" SHAPE="rect 260,200,80,16">Worldwide Contacts</A>
 </UL>
</FIG>

Aerial photograph with map overlay:

<FIG SRC="newyork.jpeg">
  <OVERLAY SRC="map.gif">
  <P>New York from the air!
</FIG>

Permitted Attributes

ID

An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Identifiers are NAME tokens and must be unique within the scope of the current document.

LANG

This is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation of English spoken in the United Kingdom. It can be used by parsers to select language specific choices for quotation marks, ligatures and hypenation rules etc. The language attribute is composed from the two letter language code from ISO 639, optionally followed by a period and a two letter country code from ISO 3166.

CLASS

This a space separated list of SGML NAME tokens and is used to subclass tag names. By convention, the class names are interpreted hierarchically, with the most general class on the left and the most specific on the right, where classes are separated by a period. The CLASS attribute is most commonly used to attach a different style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. The conventions for choosing class names are outside the scope of this specification.

CLEAR

When there is already a figure or table in the margin, you sometimes want to position another figure below the figure in the margin rather than alongside it. The CLEAR attribute allows you to move down unconditionally:

clear=left

move down until left margin is clear

clear=right

move down until right margin is clear

clear=all

move down until both margins are clear

Alternatively, you can decide to place the figure alongside the figure in the margin just so long as there is enough room. The minimum width needed is specified as:

clear="40 en"

move down until there is at least 40 en units free

clear="100 pixels"

move down until there is at least 100 pixels free

The style sheet (or browser defaults) may provide default minimum widths for each class of block-like elements.

NOFLOW

The presence of this attribute disables text flow around the figure. It avoids the need to use the CLEAR or NEEDS attributes on the following element.

SRC

Specifies the figure's graphical content. The image is specified as a URI. This attribute may appear together with the MD attribute.

MD

Specifies a message digest or cryptographic checksum for the associated graphic specified by the SRC attribute. It is used when you want to be sure that a linked object is indeed the same one that the author intended, and hasn't been modified in any way. For instance, MD="md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ", which specifies an MD5 checksum encoded as a base64 character string. The MD attribute is generally allowed for all elements which support URI based links.

ALIGN

Specifies horizontal alignment of the figure:

BLEEDLEFT

Flush left with the left (window) border.

LEFT

Flush left with the left text margin.

CENTER

The figure is centered between the text margins and text flow around the figure is disabled. This is the default setting for ALIGN.

RIGHT

Flush right with the right text margin.

BLEEDRIGHT

Flush right with the right (window) border

JUSTIFY

When applicable the figure should be magnified or reduced to fill the space between the left and right text margins. Text flow around the figure is disabled for align=justify.

WIDTH

Specifies the desired width in pixels or en units (according to the value of the UNITS attribute). User agents may scale the figure image to match this width.

HEIGHT

Specifies the desired height in pixels or en units (according to the value of the UNITS attribute). User agents may scale the figure image to match this height.

UNITS

Specifies the choice of units for width and height. units=pixels (the default) specifies pixels, while units=en specifies en units. The en unit is a typographical unit equal to half the point size.

IMAGEMAP

Specifies a URI for processing image clicks and drags.