HTML's multimedia features allow authors to include images, applets(programs that are automatically downloaded and run on the user's machine),video clips, and other HTML documents in their pages.

For example, to include a PNG image in a document, authors may write:

<BODY><P>Here's a closeup of the Grand Canyon:<OBJECT data="canyon.png" type="image/png">This is a <EM>closeup</EM> of the Grand Canyon.</OBJECT></BODY>

Previous versions of HTML allowed authors to include images (via IMG) andapplets (via APPLET). These elements have several limitations:

They fail to solve the more general problem of how to include new andfuture media types.
The APPLET element only works with Java-based applets. This element isdeprecated in favor of OBJECT.
They pose accessibility problems.

To address these issues, HTML 4 introduces the OBJECTelement, which offers an all-purpose solution to generic object inclusion. TheOBJECT element allows HTML authors to specify everything required byan object for its presentation by a user agent: source code, initial values,and run-time data. In this specification, the term "object" is used to describethe things that people want to place in HTML documents; other commonly usedterms for these things are: applets, plug-ins, media handlers, etc.

The new OBJECT element thus subsumes some of the tasks carried outby existing elements. Consider the following chart of functionalities:

Type of inclusion	Specific element	Generic element
Image	`IMG`	`OBJECT`
Applet	`APPLET` (Deprecated.)	`OBJECT`
Another HTML document	`IFRAME`	`OBJECT`

The chart indicates that each type of inclusion has a specific and a generalsolution. The generic OBJECT element will serve as the solution forimplementing future media types.

To include images, authors may use the OBJECTelement or the IMG element.

To include applets, authors should use the OBJECTelement as the APPLET element is deprecated.

To include one HTML document in another, authors mayuse either the new IFRAME element or the OBJECTelement. In both cases, the embedded document remains independent of the maindocument. Visual user agents may present the embedded document in a distinctwindow within the main document. Please consult the notes on embedded documents for a comparison of OBJECT and IFRAME for document inclusion.

Images and other included objects may have hyperlinks associated with them,both through the standard linking mechanisms, butalso via image maps. An image mapspecifies active geometric regions of an included object and assigns a link toeach region. When activated, these links may cause a document to be retrieved,may run a program on the server, etc.

In the following sections, we discuss the various mechanisms available toauthors for multimedia inclusions and creating image maps for thoseinclusions.

13.2 Including an image:the `IMG` element

<!-- To avoid problems with text-only UAs as well as to make image content understandable and navigable to users of non-visual UAs, you need to provide   a description with ALT, and avoid server-side image maps --><!ELEMENT IMG - O EMPTY -- Embedded image --><!ATTLIST IMG  %attrs;  -- %coreattrs, %i18n, %events --  src %URI;  #REQUIRED -- URI of image to embed --  alt %Text; #REQUIRED -- short description --  longdesc %URI;  #IMPLIED  -- link to long description  (complements alt) --  name CDATA  #IMPLIED  -- name of image for scripting --  height  %Length;   #IMPLIED  -- override height --  width   %Length;   #IMPLIED  -- override width --  usemap  %URI;  #IMPLIED  -- use client-side image map --  ismap   (ismap) #IMPLIED  -- use server-side image map --  >

Start tag: required, End tag: forbidden

Attribute definitions

src = uri [CT]: This attribute specifies the location of the image resource. Examples ofwidely recognized image formats include GIF, JPEG, and PNG.
longdesc = uri [CT]: This attribute specifies a link to a long description of the image. Thisdescription should supplement the short description provided using the altattribute. When the image has an associated imagemap, this attribute should provide information about the image map'scontents. This is particularly important for server-side image maps. Since anIMG element may be within the content of an A element,the user agent's mechanism in the user interface for accessing the "longdesc"resource of the former must be different than the mechanism for accessing thehref resource of the latter.
name = cdata [CI]: This attribute names the element so that it may be referred to from stylesheets or scripts. Note. This attribute has been included forbackwards compatibility. Applications should use the idattribute to identify elements.

Attributes defined elsewhere

id, class (document-wide identifiers)
alt (alternate text)
lang (languageinformation), dir (textdirection)
title (element title)
style (inlinestyle information)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
ismap, usemap (client side imagemaps)
align, width, height, border, hspace, vspace(visual presentation of objects, images, andapplets)

The IMG element embeds an image in the current document at the locationof the element's definition. The IMG element has no content; it isusually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned imagesthat are "floated" out ofline.

In an earlier example, we defined a link to a family photo. Here, we insertthe photo directly into the current document:

<BODY><P>I just returned from vacation! Here's a photo of my family at the lake:<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png" alt="A photo of my family at the lake."></BODY>

This inclusion may also be achieved with the OBJECTelement as follows:

<BODY><P>I just returned from vacation! Here's a photo of my family at the lake:<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png" type="image/png">A photo of my family at the lake.</OBJECT></BODY>

The alt attribute specifies alternate text that is rendered when theimage cannot be displayed (see below for information on how to specify alternate text ). User agents must renderalternate text when they cannot support images, they cannot support a certainimage type or when they are configured not to display images.

The following example shows how the longdescattribute can be used to link to a richer description:

<BODY><P><IMG src="sitemap.gif" alt="HP Labs Site Map" longdesc="sitemap.html"></BODY>

The alt attribute provides a short description of the image. This shouldbe sufficient to allow users to decide whether they want to follow the linkgiven by the longdesc attribute to the longer description, here"sitemap.html".

Please consult the section on the visual presentation ofobjects, images, and applets for information about image size, alignment,and borders.

13.3 Generic inclusion:the `OBJECT` element

<!ELEMENT OBJECT - - (PARAM | %flow;)* -- generic embedded object --><!ATTLIST OBJECT  %attrs;  -- %coreattrs, %i18n, %events --  declare (declare)  #IMPLIED  -- declare but don't instantiate flag --  classid %URI;  #IMPLIED  -- identifies an implementation --  codebase %URI;  #IMPLIED  -- base URI for classid, data, archive--  data %URI;  #IMPLIED  -- reference to object's data --  type %ContentType;  #IMPLIED  -- content type for data --  codetype %ContentType;  #IMPLIED  -- content type for code --  archive CDATA  #IMPLIED  -- space-separated list of URIs --  standby %Text; #IMPLIED  -- message to show while loading --  height  %Length;   #IMPLIED  -- override height --  width   %Length;   #IMPLIED  -- override width --  usemap  %URI;  #IMPLIED  -- use client-side image map --  name CDATA  #IMPLIED  -- submit as part of form --  tabindex NUMBER #IMPLIED  -- position in tabbing order --  >

Start tag: required, End tag: required

Attribute definitions

classid = uri [CT]: This attribute may be used to specify the location of an object'simplementation via a URI. It may be used together with, or as an alternative tothe data attribute, depending on the type of object involved.
codebase = uri [CT]: This attribute specifies the base path used to resolve relative URIsspecified by the classid, data, and archive attributes. When absent, its default value is the base URIof the current document.
codetype = content-type [CI]: This attribute specifies the content type of data expected when downloadingthe object specified by classid. This attribute is optional butrecommended when classid is specified since it allows the user agent toavoid loading information for unsupported content types. When absent, itdefaults to the value of the type attribute.
data = uri [CT]: This attribute may be used to specify the location of the object's data,for instance image data for objects defining images, or more generally, aserialized form of an object which can be used to recreate it. If given as arelative URI, it should be interpreted relative to the codebase attribute.
type = content-type [CI]: This attribute specifies the content type for the data specified by data. This attribute is optional but recommended when data isspecified since it allows the user agent to avoid loading information forunsupported content types. If the value of this attribute differs from the HTTPContent-Type returned by the server when the object is retrieved, the HTTPContent-Type takes precedence.
archive = uri-list [CT]: This attribute may be used to specify a space-separated list ofURIs for archives containing resources relevant to the object, which mayinclude the resources specified by the classid and dataattributes. Preloading archives will generally result in reduced load times forobjects. Archives specified as relative URIs should be interpreted relative tothe codebase attribute.
declare [CI]: When present, this boolean attribute makes the current OBJECTdefinition a declaration only. The object must be instantiated by a subsequentOBJECT definition referring to this declaration.
standby = text [CS]: This attribute specifies a message that a user agent may render whileloading the object's implementation and data.

Attributes defined elsewhere

id, class (document-wide identifiers)
lang (languageinformation), dir (textdirection)
title (element title)
style (inlinestyle information)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
tabindex (tabbing navigation)
usemap (client side image maps)
name (form submission)
align, width, height, border, hspace, vspace(visual presentation of objects, images, andapplets)

Most user agents have built-inmechanisms for rendering common data types such as text, GIF images,colors, fonts, and a handful of graphic elements. To render data types theydon't support natively, user agents generally run external applications. The OBJECT element allows authors to control whether data should berendered externally or by some program, specified by the author, that rendersthe data within the user agent.

In the most general case, an author may need to specify three types ofinformation:

The implementation of the included object. For instance, if the includedobject is a clock applet, the author must indicate the location of the applet'sexecutable code.
The data to be rendered. For instance, if the included object is a programthat renders font data, the author must indicate the location of thatdata.
Additional values required by the object at run-time. For example, someapplets may require initial values for parameters.

The OBJECT element allows authors to specify all three types of data,but authors may not have to specify all three at once. For example, someobjects may not require data (e.g., a self-contained applet that performs asmall animation). Others may not require run-time initialization. Still othersmay not require additional implementation information, i.e., the user agentitself may already know how to render that type of data (e.g., GIF images).

Authors specify an object's implementation andthe location of the data to be rendered via the OBJECTelement. To specify run-time values, however, authors use the PARAMelement, which is discussed in the section on objectinitialization.

The OBJECT element may also appear in the content of the HEADelement. Since user agents generally do not render elements in the HEAD,authors should ensure that any OBJECT elements in the HEAD donot specify content that may be rendered. Please consult the section on sharing frame data for anexample of including the OBJECT element in the HEADelement.

Please consult the section on form controls for information aboutOBJECT elements in forms.

This document does not specify the behavior of OBJECTelements that use both the classid attribute to identify an implementationand the data attribute to specify data for that implementation. In order toensure portability, authors should use the PARAM element to tellimplementations where to retrieve additional data.

13.3.1 Rules for rendering objects

A user agent must interpret an OBJECT element according to thefollowing precedence rules:

The user agent must first try to render the object. It should not renderthe element's contents, but it must examine them in case the element containsany direct children that are PARAM elements (see object initialization) or MAP elements (see client-side image maps).
If the user agent is not able to render the object for whatever reason(configured not to, lack of resources, wrong architecture, etc.), it must tryto render its contents.

Authors should not include content in OBJECTelements that appear in the HEAD element.

In the following example, we insert an analog clock applet in a document viathe OBJECT element. The applet, written in the Python language, requiresno additional data or run-time values. The classid attribute specifies thelocation of the applet:

 <P><OBJECT classid="http://www.miamachina.it/analogclock.py"></OBJECT>

Note that the clock will be rendered as soon as the user agent interpretsthis OBJECT declaration. It is possible to delay rendering of an objectby first declaring the object (described below).

Authors should complete this declaration by including alternate text as thecontents of OBJECT in case the user agent cannot render the clock.

 <P><OBJECT classid="http://www.miamachina.it/analogclock.py">An animated clock.</OBJECT>

One significant consequence of the OBJECT element's design is that it offers a mechanism for specifyingalternate object renderings; each embedded OBJECT declaration may specifyalternate content types. If a user agent cannot render the outermost OBJECT, it tries to render the contents, which may be another OBJECT element, etc.

In the following example, we embed several OBJECTdeclarations to illustrate how alternate renderings work. A user agent willattempt to render the first OBJECT element it can, in the following order:(1) an Earth applet written in the Python language, (2) an MPEG animation ofthe Earth, (3) a GIF image of the Earth, (4) alternate text.

<P> <!-- First, try the Python applet --><OBJECT title="The Earth as seen from space" classid="http://www.observer.mars/TheEarth.py"> <!-- Else, try the MPEG video -->  <OBJECT data="TheEarth.mpeg" type="application/mpeg"> <!-- Else, try the GIF image --> <OBJECT data="TheEarth.gif" type="image/gif"> <!-- Else render the text --> The <STRONG>Earth</STRONG> as seen from space. </OBJECT>  </OBJECT></OBJECT>

The outermost declaration specifies an applet that requires no data orinitial values. The second declaration specifies an MPEG animation and, sinceit does not define the location of an implementation to handle MPEG, relies onthe user agent to handle the animation. We also set the type attribute so that a user agent that knows it cannot render MPEGwill not bother to retrieve "TheEarth.mpeg" from the network. The thirddeclaration specifies the location of a GIF file and furnishes alternate textin case all other mechanisms fail.

Inline vs. external data. Data to be rendered may besupplied in two ways: inline and from an external resource. While the formermethod will generally lead to faster rendering, it is not convenient whenrendering large quantities of data.

Here's an example that illustrates how inline data may be fed to an OBJECT:

<P><OBJECT id="clock1" classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="data:application/x-oleobject;base64, ...base64 data..."> A clock.</OBJECT>

Please consult the section on the visual presentation ofobjects, images, and applets for information about object size, alignment,and borders.

13.3.2 Objectinitialization: the `PARAM` element

<!ELEMENT PARAM - O EMPTY  -- named property value --><!ATTLIST PARAM  id  ID #IMPLIED  -- document-wide unique id --  name CDATA  #REQUIRED -- property name --  value   CDATA  #IMPLIED  -- property value --  valuetype   (DATA|REF|OBJECT) DATA   -- How to interpret value --  type %ContentType;  #IMPLIED  -- content type for value  when valuetype=ref --  >

Start tag: required, End tag: forbidden

Attribute definitions

name = cdata

This attribute defines the name of a run-time parameter, assumed to beknown by the inserted object. Whether the property name is case-sensitivedepends on the specific object implementation.

value = cdata

This attribute specifies the value of a run-time parameter specified by name. Property values have no meaning to HTML; their meaning isdetermined by the object in question.

valuetype = data|ref|object [CI]

This attribute specifies the type of the value attribute.Possible values:

data: This is default value for the attribute. It means thatthe value specified by value will be evaluated andpassed to the object's implementation as a string.
ref: The value specified by valueis a URI that designates a resource where run-time values are stored. Thisallows support tools to identify URIs given as parameters. The URI must bepassed to the object as is, i.e., unresolved.
object: The value specified by value is an identifier that refers to an OBJECTdeclaration in the same document. The identifier must be the value of the idattribute set for the declared OBJECT element.

type = content-type [CI]

This attribute specifies the content type of the resource designated by thevalue attribute only in the casewhere valuetype is set to "ref". This attribute thus specifies for theuser agent, the type of values that will be found at the URI designated byvalue.

Attributes defined elsewhere

id (document-wideidentifiers)

PARAM elements specify a set of values that may be required by anobject at run-time. Any number of PARAM elements may appear in thecontent of an OBJECT or APPLET element, in any order, but must be placedat the start of the content of the enclosing OBJECT or APPLETelement.

The syntax of names and values is assumed to be understood by the object'simplementation. This document does not specify how user agents should retrievename/value pairs nor how they should interpret parameter names that appeartwice.

We return to the clock example to illustrate the use of PARAM:suppose that the applet is able to handle two run-time parameters that defineits initial height and width. We can set the initial dimensions to 40x40 pixelswith two PARAM elements.

 <P><OBJECT classid="http://www.miamachina.it/analogclock.py"><PARAM name="height" value="40" valuetype="data"><PARAM name="width" value="40" valuetype="data">This user agent cannot render Python applications.</OBJECT>

In the following example, run-time data for the object's "Init_values"parameter is specified as an external resource (a GIF file). The value of thevaluetype attribute is thus set to "ref" and the value is a URI designating the resource.

<P><OBJECT classid="http://www.gifstuff.com/gifappli"   standby="Loading Elvis..."><PARAM name="Init_values"   value="./images/elvis.gif">   valuetype="ref"></OBJECT>

Note that we have also set the standby attribute so that theuser agent may display a message while the rendering mechanism loads.

When an OBJECT element is rendered, user agents must search thecontent for only those PARAM elements that are direct children and "feed"them to the OBJECT.

Thus, in the following example, if "obj1" is rendered, "param1" applies to"obj1" (and not "obj2"). If "obj1" is not rendered and "obj2" is, "param1" isignored, and "param2" applies to "obj2". If neither OBJECTis rendered, neither PARAM applies.

<P><OBJECT id="obj1">   <PARAM name="param1">   <OBJECT id="obj2">  <PARAM name="param2">   </OBJECT></OBJECT>

13.3.3 Global naming schemes forobjects

The location of an object's implementation is given by a URI. As wediscussed in the introduction toURIs, the first segment of an absolute URI specifies the naming scheme usedto transfer the data designated by the URI. For HTML documents, this scheme isfrequently "http". Some applets might employ other naming schemes. Forinstance, when specifying a Java applet, authors may use URIs that begin with"java" and for ActiveX applets, authors may use "clsid".

In the following example, we insert a Java applet into an HTML document.

<P><OBJECT classid="java:program.start"></OBJECT>

By setting the codetype attribute, a user agent can decide whether toretrieve the Java application based on its ability to do so.

<OBJECT codetype="application/java-archive" classid="java:program.start"></OBJECT>

Some rendering schemes require additional information to identify theirimplementation and must be told where to find that information. Authors maygive path information to the object's implementation via the codebase attribute.

<OBJECT codetype="application/java-archive" classid="java:program.start"> codebase="http://foooo.bar.com/java/myimplementation/"</OBJECT>

The following example specifies (with the classid attribute) an ActiveX object via a URI that begins with thenaming scheme "clsid". The data attribute locates the data to render(another clock).

<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="http://www.acme.com/ole/clock.stm">This application is not supported.</OBJECT>

13.3.4 Object declarations andinstantiations

The preceding examples have only illustrated isolated object definitions. Whena document is to contain more than one instance of the same object, it ispossible to separate the declaration of the object from its instantiations.Doing so has several advantages:

Data may be retrieved from the network by the user agent one time(during the declaration) and reused for each instantiation.
It is possible to instantiate an object from a location other than theobject's declaration, for example, from a link.
It is possible to specify objects as run-time data for other objects.

To declare an object so that it is not executed when read by the user agent,set the boolean declare attribute in the OBJECT element. At the same time,authors must identify the declaration by setting the idattribute in the OBJECT element to a unique value. Later instantiations ofthe object will refer to this identifier.

A declared OBJECT must appear in a document before the first instanceof that OBJECT.

An object defined with the declare attribute is instantiated everytime an element that refers to that object requires it to be rendered (e.g., alink that refers to it is activated, an object that refers to it is activated,etc.).

In the following example, we declare an OBJECT and cause it to beinstantiated by referring to it from a link. Thus, the object can be activatedby clicking on some highlighted text, for example.

<P><OBJECT declare id="earth.declaration" data="TheEarth.mpeg" type="application/mpeg">   The <STRONG>Earth</STRONG> as seen from space.</OBJECT>...later in the document...<P>A neat <A href="#earth.declaration"> animation of The Earth!</A>

The following example illustrates how to specify run-time values that areother objects. In this example, we send text (a poem, in fact) to ahypothetical mechanism for viewing poems. The object recognizes a run-timeparameter named "font" (say, for rendering the poem text in a certain font).The value for this parameter is itself an object that inserts (but does notrender) the font object. The relationship between the font object and the poemviewer object is achieved by (1) assigning the id "tribune" to the font objectdeclaration and (2) referring to it from the PARAM element of the poem viewerobject (with valuetype and value).

<P><OBJECT declare id="tribune" type="application/x-webfont" data="tribune.gif"></OBJECT>...view the poem in KublaKhan.txt here...<P><OBJECT classid="http://foo.bar.com/poem_viewer" data="KublaKhan.txt"><PARAM name="font" valuetype="object" value="#tribune"><P>You're missing a really cool poem viewer ...</OBJECT>

User agents that don't support the declare attribute must render thecontents of the OBJECT declaration.

13.4 Including anapplet: the `APPLET`element

APPLET is deprecated (with all itsattributes) in favor of OBJECT.

See the Transitional DTD for theformal definition.

Attribute definitions

codebase = uri [CT]

This attribute specifies the base URI for the applet. If this attribute isnot specified, then it defaults the same base URI as for the current document.Values for this attribute may only refer to subdirectories of the directorycontaining the current document. Note.While the restriction on subdirectories is a departure from common practice andthe HTML 3.2 specification, the HTML Working Group has chosen to leave therestriction in this version of the specification for securityreasons.

code = cdata [CS]

This attribute specifies either the name of the class file that containsthe applet's compiled applet subclass or the path to get the class, includingthe class file itself. It is interpreted with respect to the applet's codebase.One of code or object must be present.

name = cdata [CS]

This attribute specifies a name for the applet instance, which makes itpossible for applets on the same page to find (and communicate with) eachother.

archive = uri-list [CT]

This attribute specifies a comma-separated list of URIs forarchives containing classes and other resources that will be "preloaded". Theclasses are loaded using an instance of an AppletClassLoader with the given codebase. Relative URIs for archives are interpretedwith respect to the applet's codebase. Preloading resources can significantlyimprove the performance of applets.

object = cdata [CS]

This attribute names a resource containing a serialized representation ofan applet's state. It is interpreted relative to the applet's codebase. Theserialized data contains the applet's class name but not the implementation.The class name is used to retrieve the implementation from a class file orarchive.

When the applet is "deserialized" the start() method is invokedbut not the init() method. Attributes valid when the originalobject was serialized are not restored. Any attributes passedto this APPLET instance will be available to the applet. Authors should usethis feature with extreme caution. An applet should be stopped before it isserialized.

Either code or object must be present. If both code andobject are given, it is an error if they provide different classnames.

width = length [CI]

This attribute specifies the initial width of the applet's display area(excluding any windows or dialogs that the applet creates).

height = length [CI]

This attribute specifies the initial height of the applet's display area(excluding any windows or dialogs that the applet creates).

Attributes defined elsewhere

This element, supported by all Java-enabled browsers, allows designers toembed a Java applet in an HTML document. It has been deprecated in favor of the OBJECTelement.

The content of the APPLET acts as alternate information for user agentsthat don't support this element or are currently configured not to supportapplets. User agents must ignore the content otherwise.

DEPRECATED EXAMPLE:
In the following example, the APPLET element includes a Java appletin the document. Since no codebase is supplied, the appletis assumed to be in the same directory as the current document.

<APPLET code="Bubbles.class" width="500" height="500">Java applet that draws animated bubbles.</APPLET>

This example may be rewritten with OBJECT as follows:

<P><OBJECT codetype="application/java" classid="java:Bubbles.class" width="500" height="500">Java applet that draws animated bubbles.</OBJECT>

Initial values may be supplied to the applet via the PARAMelement.

DEPRECATED EXAMPLE:
The following sample Java applet:

<APPLET code="AudioItem" width="15" height="15"><PARAM name="snd" value="Hello.au|Welcome.au">Java applet that plays a welcoming sound.</APPLET>

may be rewritten as follows with OBJECT:

<OBJECT codetype="application/java" classid="AudioItem" width="15" height="15"><PARAM name="snd" value="Hello.au|Welcome.au">Java applet that plays a welcoming sound.</OBJECT>

13.5 Notes on embeddeddocuments

Sometimes, rather than linking to a document, anauthor may want to embed it directly into a primary HTML document. Authors mayuse either the IFRAME element or the OBJECTelement for this purpose, but the elements differ in some ways. Not only do thetwo elements have different content models, the IFRAME element may be a target frame (see the section on specifying target frame informationfor details) and may be "selected" by a user agent as the focus for printing,viewing HTML source, etc. User agents may render selected frames elements inways that distinguish them from unselected frames (e.g., by drawing a borderaround the selected frame).

An embedded document is entirely independent of thedocument in which it is embedded. For instance, relative URIs within theembedded document resolveaccording to the base URI of the embedded document, not that of the maindocument. An embedded document is only rendered within another document (e.g.,in a subwindow); it remains otherwise independent.

For instance, the following line embeds the contents of embed_me.html at the location where the OBJECT definition occurs.

...text before...<OBJECT data="embed_me.html">Warning: embed_me.html could not be embedded.</OBJECT>...text after...

Recall that the contents of OBJECT must only be rendered if thefile specified by the data attribute cannot be loaded.

The behavior of a user agent in cases where a file includes itself is notdefined.

13.6 Image maps

Image maps allow authors to specify regions of an image or object and assign aspecific action to each region (e.g., retrieve a document, run a program, etc.)When the region is activated by the user, the action is executed.

An image map is created by associating an object with a specification ofsensitive geometric areas on the object.

There are two types of image maps:

Client-side. When a user activates a region of aclient-side image map with a mouse, the pixel coordinates are interpreted bythe user agent. The user agent selects a link that was specified for theactivated region and follows it.
Server-side. When a user activates a region of aserver-side image map with a mouse, the pixel coordinates of the click are sentto the server-side agent specified by the href attribute of the A element.The server-side agent interprets the coordinates and performs some action.

Client-side image maps are preferred overserver-side image maps for at least two reasons: they are accessible to peoplebrowsing with non-graphical user agents and they offer immediate feedback as towhether or not the pointer is over an active region.

13.6.1 Client-side imagemaps: the `MAP` and `AREA` elements

<!ELEMENT MAP - - ((%block;) | AREA)+ -- client-side image map --><!ATTLIST MAP  %attrs;  -- %coreattrs, %i18n, %events --  name CDATA  #REQUIRED -- for reference by usemap --  >

Start tag: required, End tag: required

<!ELEMENT AREA - O EMPTY   -- client-side image map area --><!ATTLIST AREA  %attrs;  -- %coreattrs, %i18n, %events --  shape   %Shape; rect  -- controls interpretation of coords --  coords  %Coords;   #IMPLIED  -- comma-separated list of lengths --  href %URI;  #IMPLIED  -- URI for linked resource --  nohref  (nohref)   #IMPLIED  -- this region has no action --  alt %Text; #REQUIRED -- short description --  tabindex NUMBER #IMPLIED  -- position in tabbing order --  accesskey   %Character; #IMPLIED  -- accessibility key character --  onfocus %Script;   #IMPLIED  -- the element got the focus --  onblur  %Script;   #IMPLIED  -- the element lost the focus --  >

Start tag: required, End tag: forbidden

MAP attribute definitions

name = cdata [CI]: This attribute assigns a name to the image map defined by a MAPelement.

AREA attribute definitions

shape = default|rect|circle|poly [CI]

This attribute specifies the shape of a region. Possible values:

default: Specifies the entire region.
rect: Define a rectangular region.
circle: Define a circular region.
poly: Define a polygonal region.

coords = coordinates [CN]

This attribute specifies the position and shape on the screen. The numberand order of values depends on the shape being defined. Possible combinations:

rect: left-x, top-y, right-x, bottom-y.
circle: center-x, center-y, radius. Note.When the radius value is a percentage value, user agents should calculate thefinal radius value based on the associated object's width and height. Theradius should be the smaller value of the two.
poly: x1, y1, x2, y2, ..., xN, yN. The first x and ycoordinate pair and the last should be the same to close the polygon. Whenthese coordinate values are not the same, user agents should infer anadditional coordinate pair to close the polygon.

Coordinates are relative to the top, left corner of the object. All valuesare lengths. All values are separatedby commas.

nohref [CI]

When set, this boolean attribute specifies that a region has no associatedlink.

Attribute to associate an image map with an element

usemap = uri [CT]: This attribute associates an image map with an element. The image map isdefined by a MAP element. The value of usemap must match thevalue of the name attribute of the associated MAPelement.

Attributes defined elsewhere

id, class (document-wide identifiers)
lang (languageinformation), dir (textdirection)
title (element title)
style (inlinestyle information)
name (submitting objects with forms)
alt (alternate text)
href (anchor reference) target (frame targetinformation)
tabindex (tabbing navigation)
accesskey (access keys)
shape (image maps)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur (intrinsic events)

The MAP element specifies a client-side image map (or other navigationmechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated withan element via the element's usemap attribute. The MAPelement may be used without an associated image for general navigationmechanisms.

The presence of the usemap attribute for an OBJECTimplies that the object being included is an image. Furthermore, when the OBJECTelement has an associated client-side image map, user agents may implement userinteraction with the OBJECT solely in terms of the client-side image map.This allows user agents (such as an audio browser or robot) to interact withthe OBJECT without having to process it; the user agent may even electnot to retrieve (or process) the object. When an OBJECThas an associated image map, authors should not expect that the object will beretrieved or processed by every user agent.

The MAP element content model allows authors tocombine the following:

One or more AREA elements. These elements have no content but specifythe geometric regions of the image map and the link associated with eachregion. Note that user agents do not generally render AREAelements. Therefore, authors must provide alternate text for each AREAwith the alt attribute (see below for information on how to specify alternate text).
Block-level content. This content should include A elementsthat specify the geometric regions of the image map and the link associatedwith each region. Note that the user agent should render block-level content ofa MAP element. Authors should use this method to create moreaccessible documents.

When a MAP element contains mixed content (both AREAelements and block-level content), user agents must ignore the AREAelements.

Authors should specify an image maps's geometry completely with AREAelements, or completely with A elements, or completely with both if content ismixed. Authors may wish to mix content so that older user agents will handlemap geometries specified by AREA elements and new user agents will takeadvantage of richer block content.

If two or more defined regions overlap, theregion-defining element that appears earliest in the document takes precedence(i.e., responds to user input).

User agents and authorsshould offer textual alternates to graphical image maps for caseswhen graphics are not available or the user cannot access them. For example,user agents may use alt text to create textual links in place of a graphicalimage map. Such links may be activated in a variety of ways (keyboard, voiceactivation, etc.).

Note. MAP is not backwards compatible with HTML 2.0user agents.

Client-side image map examples

In the following example, we create a client-side image map for the OBJECTelement. We do not want to render the image map's contents when the OBJECTis rendered, so we "hide" the MAP element within the OBJECTelement's content. Consequently, the MAP element's contents will only berendered if the OBJECT cannot be rendered.

<HTML>   <HEAD>  <TITLE>The cool site!</TITLE>   </HEAD>   <BODY> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> <MAP name="map1">   <P>Navigate the site:   <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |   <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |   <A href="search.html" shape="circle" coords="184,200,60">Search</A> |   <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">   Top Ten</A> </MAP> </OBJECT>   </BODY></HTML>

We may want to render the image map's contents even when a user agent canrender the OBJECT. For instance, we may want to associate an image mapwith an OBJECT element and include a text navigation bar at thebottom of the page. To do so, we define the MAP element outside the OBJECT:

<HTML>   <HEAD>  <TITLE>The cool site!</TITLE>   </HEAD>   <BODY> <P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"> </OBJECT> ...the rest of the page here... <MAP name="map1">   <P>Navigate the site:   <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |   <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |   <A href="search.html" shape="circle" coords="184,200,60">Search</A> |   <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">   Top Ten</A> </MAP>   </BODY></HTML>

In the following example, we create a similar image map, this time using theAREA element. Note the use of alt text:

<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">   <P>This is a navigation bar.   </OBJECT><MAP name="map1"> <AREA href="guide.html"   alt="Access Guide"   shape="rect"   coords="0,0,118,28"> <AREA href="search.html"   alt="Search"   shape="rect"   coords="184,0,276,28"> <AREA href="shortcut.html"   alt="Go"   shape="circle"  coords="184,200,60"> <AREA href="top10.html"   alt="Top Ten"   shape="poly"   coords="276,0,276,28,100,200,50,50,276,0"></MAP>

Here is a similar version using the IMG element instead of OBJECT(with the same MAP declaration):

<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">

The following example illustrates how image maps may be shared.

Nested OBJECT elements are useful for providing fallbacks in case auser agent doesn't support certain formats. For example:

<P><OBJECT data="navbar.png" type="image/png">  <OBJECT data="navbar.gif" type="image/gif"> text describing the image...  </OBJECT></OBJECT>

If the user agent doesn't support the PNG format, it tries to render the GIFimage. If it doesn't support GIF (e.g., it's a speech-based user agent), itdefaults to the text description provided as the content of the inner OBJECTelement. When OBJECT elements are nested this way, authors may share imagemaps among them:

<P><OBJECT data="navbar.png" type="image/png" usemap="#map1">  <OBJECT data="navbar.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navigate the site:  <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |  <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |  <A href="search.html" shape="circle" coords="184,200,60">Search</A> |  <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">  Top Ten</A> </MAP>  </OBJECT></OBJECT>

The following example illustrates how anchors may be specified to createinactive zones within an image map. The first anchor specifies a small circularregion with no associated link. The second anchor specifies a larger circularregion with the same center coordinates. Combined, the two form a ring whosecenter is inactive and whose rim is active. The order of the anchor definitionsis important, since the smaller circle must override the larger circle.

<MAP name="map1"><P><A shape="circle" coords="100,200,50">I'm inactive.</A><A href="outer-ring-link.html" shape="circle" coords="100,200,250">I'm active.</A></MAP>

Similarly, the nohref attribute for the AREAelement declares that geometric region has no associated link.

13.6.2 Server-sideimage maps

Server-side image maps may be interesting in caseswhere the image map is too complicated for a client-side image map.

It is only possible to define a server-side image map for the IMG andINPUT elements. In the case of IMG, the IMG mustbe inside an A element and the boolean attribute ismap ([CI]) must be set. In the case of INPUT, the INPUT must be of type "image".

When the user activates the link by clicking on the image, the screencoordinates are sent directly to the server where the document resides. Screencoordinates are expressed as screen pixel values relative to the image. Fornormative information about the definition of a pixel and how to scale it,please consult [CSS1].

In the following example, the active region defines a server-side link.Thus, a click anywhere on the image will cause the click's coordinates to besent to the server.

<P><A href="http://www.acme.com/cgi-bin/competition"> <IMG src="game.gif" ismap alt="target"></A>

Thelocation clicked is passed to the server as follows. The user agentderives a new URI from the URI specified by the href attribute of the A element, byappending `?' followed by the x and y coordinates, separated by a comma. Thelink is then followed using the new URI. For instance, in the given example, ifthe user clicks at the location x=10, y=27 then the derived URI is"http://www.acme.com/cgi-bin/competition?10,27".

User agents that do not offer the user a means to select specificcoordinates (e.g., non-graphical user agents that rely on keyboard input,speech-based user agents, etc.) should send the coordinates "0,0" to the serverwhen the link is activated.

13.7 Visual presentationof images, objects, and applets

All IMG and OBJECT attributes that concern visual alignment andpresentation have been deprecated infavor of style sheets.

13.7.1 Width andheight

Attribute definitions

width = length [CN]: Image and object width override.
height = length [CN]: Image and object height override.

When specified, the width and height attributes tell user agents to override the natural image orobject size in favor of these values.

When the object is an image, it is scaled. User agents should do their bestto scale an object or image to match the width and height specified by theauthor. Note that lengths expressed as percentages are based on the horizontalor vertical space currently available, not on the natural size of the image,object, or applet.

The height and width attributes give user agentsan idea of the size of an image or object so that they may reserve space for itand continue rendering the document while waiting for the image data.

13.7.2 White space around images andobjects

Attribute definitions

hspace = pixels [CN]: Deprecated. Thisattribute specifies the amount of white space to be inserted to the left andright of an IMG, APPLET, or OBJECT. The default value is notspecified, but is generally a small, non-zero length.
vspace = pixels [CN]: Deprecated. Thisattribute specifies the amount of white space to be inserted above and below anIMG, APPLET, or OBJECT. The default value is notspecified, but is generally a small, non-zero length.

13.7.3 Borders

An image or object may be surrounded by a border (e.g., when a border isspecified by the user or when the image is the content of an Aelement).

Attribute definitions

border = pixels [CN]: Deprecated. Thisattribute specifies the width of an IMG or OBJECTborder, in pixels. The default value for this attribute depends on the useragent.

13.7.4 Alignment

Attribute definitions

align = bottom|middle|top|left|right: Deprecated. Thisattribute specifies the position of an IMG, OBJECT, or APPLETwith respect to its context.

The following values for align concern the object's positionwith respect to surrounding text:

bottom: means that the bottom of the object should bevertically aligned with the current baseline. This is the default value.
middle: means that the center of the object should bevertically aligned with the current baseline.
top: means that the top of the object should be verticallyaligned with the top of the current text line.

Two other values, left and right, cause the imageto float to the current left or right margin. They are discussed in the sectionon floating objects.

Differing interpretations of align. User agents vary intheir interpretation of the align attribute. Some only takeinto account what has occurred on the text line prior to the element, some takeinto account the text on both sides of the element.

13.8 How tospecify alternate text

Attribute definitions

alt = text [CS]: For user agents that cannot display images, forms, or applets, thisattribute specifies alternate text. The language of the alternate text isspecified by the lang attribute.

Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternatetext to serve as content when the element cannot be rendered normally.Specifying alternate text assists users without graphic display terminals,users whose browsers don't support forms, visually impaired users, those whouse speech synthesizers, those who have configured their graphical user agentsnot to display images, etc.

The alt attribute must be specified for the IMG andAREA elements. It is optional for the INPUT and APPLET elements.

While alternate text may be very helpful, it must be handled with care.Authors should observe the following guidelines:

Do not specify irrelevant alternate text when including images intended toformat a page, for instance, alt="red ball" would beinappropriate for an image that adds a red ball for decorating a heading orparagraph. In such cases, the alternate text should be the empty string ("").Authors are in any case advised to avoid using images to format pages; stylesheets should be used instead.
Do not specify meaningless alternate text (e.g., "dummy text"). Not onlywill this frustrate users, it will slow down user agents that must convert textto speech or braille output.

Implementors should consult the section on accessibility for information abouthow to handle cases of omitted alternate text.