---
tags: HTML4 SPEC
---
# Section 13: Objects, Images, and Applets
- [document link](https://www.w3.org/TR/html401/struct/objects.html#h-13.1)
## 13.1 Introduction to objects, images, and applets
HTML's multimedia features allow authors to include:
- images
- applets (programs that are automatically downloaded and run on the user's machine)
- video clips
- other HTML documents
Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). HTML 4 introduces the **OBJECT** element, which offers an **all-purpose solution** to generic object inclusion.
| 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 general solution.
In the following sections, we discuss the various mechanisms available to authors for multimedia inclusions
## 13.2 Including an image: the IMG element
Tag
- **start tag**: required
- **end tag**: forbidden
Attribute Definition
- **src**: specifies the location of the image resource (gif, jpeg, png)
- **longdesc**: specifies a link to a long description of the image (supplement the short description provided using the **alt** attribute)
- **name**: this attribute names the element so that it may be referred to from style sheets or scripts (This attribute has been included for **backwards compatibility**. Applications should use the **id attribute** to identify elements)
```htmlembedded=
<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>
```
```html=
<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>
```
:::warning
The **alt** attribute specifies alternate text that is rendered when the image cannot be displayed
:::
```htmlembedded=
<BODY>
<P>
<IMG src="sitemap.gif"
alt="HP Labs Site Map"
longdesc="sitemap.html">
</BODY>
```
:::info
The following example shows how the **longdesc** attribute can be used to link to a richer description
:::
## 13.3 Generic inclusion: the OBJECT element
Tag
- **start tag**: required
- **end tag**: required
Attribute Definition
- **classid**: specify the location of an object's implementation via a URI
- **data**: specify the location of the object's data (EX. pdf, img)
- **archive**: specify a space-separated list of URIs for archives containing resources relevant to the object (EX. classid, data)
- **codebase**: specifies the base path used to resolve relative URIs specified by the classid, data, and archive attributes
- **type**: specifies the content type for the data specified by data
- **declare**: this boolean attribute makes the current OBJECT definition a declaration only. The object must be instantiated by a subsequent OBJECT definition referring to this declaration
- **standby**: specifies a message that a user agent may render while loading the object's implementation and data
### 13.3.1 Rules for rendering objects
A user agent must interpret an OBJECT element according to the following precedence rules:
1. The user agent must first try to render the object. It should not render the element's contents.
2. If the user agent is not able to render the object for whatever reason, it must try to render its contents
Example:
```htmlembedded=
<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
An animated clock.
</OBJECT>
```
Example: alternate renderings
```htmlembedded=
<!-- 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>
```
### 13.3.2 Object initialization: the PARAM element
Tag
- **start tag**: required
- **end tag**: forbidden
Attribute Definition
- **name**: defines the name of a run-time parameter
- **value**: specifies the value of a run-time parameter
- **valuetype**: specifies the type of the value attribute
- data: the value specified by `value` will be evaluated and passed to the object's implementation as a string
- ref: The value specified by `value` is a URI that designates a resource where run-time values are stored
- The value specified by `value` is an identifier that refers to an OBJECT declaration in the same document
- **type**: This attribute specifies the content type of the resource designated by the `value` attribute only in the case where `valuetype` is set to "ref".
`PARAM` elements specify a set of values that may be required by an `object` at run-time. Any number of `PARAM` elements may appear in the content of an `OBJECT` element, in any order, but must be placed at the start of the content of the enclosing `OBJECT` element.
Example:
```htmlembedded=
<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>
```
:::info
When an `OBJECT` element is rendered, user agents must search the content for only those `PARAM` elements that are direct children and "feed" them to the `OBJECT`.
:::
Example:
```htmlembedded=
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
```
if "obj1" is rendered, "param1" applies to "obj1" (and not "obj2"). If "obj1" is not rendered and "obj2" is, "param1" is ignored, and "param2" applies to "obj2".
### 13.3.3 Global naming schemes for objects
The location of an object's implementation is given by a URI.The **first segment** of an absolute URI specifies the **naming scheme** used to transfer the data.
Example: insert a Java applet into an HTML document
```htmlembedded=
<OBJECT classid="java:program.start">
</OBJECT>
```
Example: ActiveX object
```htmlembedded=
<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 and instantiations
When a document is to contain more than one instance of the same object, it is possible 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
- instantiate an object from a location other than the object's declaration, for example, from a link
- specify objects as run-time data for other objects
:::info
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
:::
:::warning
At the same time, authors must identify the declaration by setting the `id` attribute in the `OBJECT` element to a unique value.
Later instantiations of the object will refer to this identifier
:::
Example:
```htmlembedded=
<OBJECT declare
id="earth.declaration"
data="TheEarth.mpeg"
type="application/mpeg">
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
<P>A neat <A href="#earth.declaration"> animation of The Earth!</A>
```
## 13.4 Including an applet: the `APPLET` element
:::warning
APPLET is deprecated (with all its attributes) in favor of OBJECT.
:::
This element, supported by all Java-enabled browsers, allows designers to embed a Java applet in an HTML document.
Deprecated Example:
```htmlembedded=
<APPLET code="Bubbles.class" width="500" height="500">
Java applet that draws animated bubbles.
</APPLET>
```
This example may be rewritten with OBJECT as follows:
```htmlembedded=
<OBJECT codetype="application/java"
classid="java:Bubbles.class"
width="500" height="500">
Java applet that draws animated bubbles.
</OBJECT>
```
Deprecated Example:
```htmlembedded=
<APPLET code="AudioItem" width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Java applet that plays a welcoming sound.
</APPLET>
```
This example may be rewritten with OBJECT as follows:
```htmlembedded=
<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 embedded documents
Embed document directly into a primary HTML document
1. IFRAME
* may be a target frame
* may be "selected" by a user agent as the focus for printing, viewing HTML source
* etc. User agents may render selected frames elements in ways that distinguish them from unselected frames (e.g., by drawing a border around the selected frame).
2. OBJECT
* the following line embeds the contents of embed_me.html at the location where the OBJECT definition occurs.
```htmlembedded=
...text before...
<OBJECT data="embed_me.html">
Warning: embed_me.html could not be embedded.
</OBJECT>
...text after...
```
An embedded document is entirely independent of the document in which it is embedded.
## 13.6 Image maps
1. specify regions of an image or object
2. assign a specific action to each region
* retrieve a document
* run a program
3. two types of image maps:
* Client-side
* When a user activates a region of a client-side image map with a mouse, the pixel coordinates are interpreted by the user agent. The user agent selects a link that was specified for the activated region and follows it.
* preferred:
* accessible to people browsing with non-graphical user agents
* they offer immediate feedback as to whether or not the pointer is over an active region.
* Server-side
* When a user activates a region of a server-side image map with a mouse, the pixel coordinates of the click are sent to the server-side agent specified by the href attribute of the A element. The server-side agent interprets the coordinates and performs some action.
### 13.6.1 Client-side image maps: the MAP and AREA elements
#### *MAP*
```
<!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**
* MAP attribute definitions：
* name = cdata [CI]
This attribute assigns a name to the image map defined by a MAP element.
* The MAP element content model allows authors to combine the following:
* One or more AREA elements.
* These elements have no content but specify the geometric regions of the image map and the link associated with each region.
* When a MAP element contains mixed content (both AREA elements and block-level content), user agents must ignore the AREA elements.
* Block-level content.
* This content should include A elements that specify the geometric regions of the image map and the link associated with each region.
:::warning
Note. MAP is not backwards compatible with HTML 2.0 user agents.
:::
#### *AREA*
```
<!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**
* AREA attribute definitions：
* shape = default|rect|circle|poly [CI]
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]
specifies the position and shape on the screen. Possible combinations:
* rect: left-x, top-y, right-x, bottom-y.
* circle: center-x, center-y, radius.
* poly: x1, y1, x2, y2, ..., xN, yN.
* nohref [CI]
When set, this boolean attribute specifies that a region has no associated link.
* usemap = uri [CT]
This attribute associates an image map with an element.
* id, class (document-wide identifiers)
* lang (language information), dir (text direction)
* title (element title)
* style (inline style information)
* name (submitting objects with forms)
* alt (alternate text)
* href (anchor reference) target (frame target information)
* tabindex (tabbing navigation)
* accesskey (access keys)
* shape (image maps)
* onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur (intrinsic events)
**usemap attribute for an OBJECT**
- object being included is an image. OBJECT element has an associated client-side image map
- This allows user agents (such as an audio browser or robot) to interact with the OBJECT without having to process it.
**Client-side image map examples**
The MAP element's contents will only be rendered if the OBJECT cannot be rendered.
```htmlembedded=
<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>
```
Render the image map's contents even when a user agent can render the OBJECT.
Associate an image map with an OBJECT element
We define the MAP element outside the OBJECT.
```htmlembedded=
<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 the AREA element. Note the use of alt text:
```htmlembedded=
<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>
```
Similar version using the IMG element instead of OBJECT (with the same MAP declaration):
```htmlembedded=
<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">
```
Nested OBJECT elements are useful for providing fallbacks in case a user agent doesn't support certain formats.
```htmlembedded=
<P>
<OBJECT data="navbar.png" type="image/png">
<OBJECT data="navbar.gif" type="image/gif">
text describing the image...
</OBJECT>
</OBJECT>
```
When OBJECT elements are nested this way, authors may share image maps among them:
```htmlembedded=
<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>
```
Anchors may be specified to create inactive zones within an image map. The two anchors form a ring whose center is inactive and whose rim is active. The order of the anchor definitions is important, since the smaller circle must override the larger circle.
Similarly, the nohref attribute for the AREA element declares that geometric region has no associated link.
```htmlembedded=
<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>
```
### 13.6.2 Server-side image maps
For cases where 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 and INPUT elements.
* IMG
* inside an A element
* boolean attribute ismap ([CI]) must be set.
* INPUT
* the INPUT must be of type "image".
When the user activates the link by clicking on the image, the screen coordinates are sent directly to the server where the document resides.
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 be sent to the server.
```htmlembedded=
<P><A href="http://www.acme.com/cgi-bin/competition">
<IMG src="game.gif" ismap alt="target"></A>
```
For instance, in the given example, if the user clicks at the location x=10, y=27 then the derived URI is "http://www.acme.com/cgi-bin/competition?10,27".
## 13.7 Visual presentation of images, objects, and applets
All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
### 13.7.1 Width and height
有寫的話可以加快rendering的速度。最好可以寫一下。
* width = length [CN]
mage and object width override.
* height = length [CN]
Image and object height override.
The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.
### 13.7.2 White space around images and objects
* hspace = pixels [CN]
Deprecated. This attribute specifies the amount of white space to be inserted to the left and right of an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length.
* vspace = pixels [CN]
Deprecated. This attribute specifies the amount of white space to be inserted above and below an IMG, APPLET, or OBJECT. The default value is not specified, 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 is specified by the user or when the image is the content of an A element).
* border = pixels [CN]
Deprecated. This attribute specifies the width of an IMG or OBJECT border, in pixels. The default value for this attribute depends on the user agent.
### 13.7.4 Alignment
* align = bottom|middle|top|left|right
Deprecated. This attribute specifies the position of an IMG, OBJECT, or APPLET with respect to its context.
## 13.8 How to specify alternate text
* alt = text [CS]
* For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.
* The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
* Do not specify irrelevant alternate text when including images intended to format a page.
* Do not specify meaningless alternate text.
Sign in with Wallet
Connect another wallet