You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2244 lines
102 KiB
2244 lines
102 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<title>Objects, Images, and Applets in HTML documents</title>
|
|
<link rel="previous" href="links.html">
|
|
<link rel="next" href="../present/styles.html">
|
|
<link rel="contents" href="../cover.html#toc">
|
|
<link rel="stylesheet" type="text/css" href=
|
|
"http://www.w3.org/StyleSheets/TR/W3C-REC">
|
|
<link rel="STYLESHEET" href="../style/default.css" type="text/css">
|
|
</head>
|
|
<body>
|
|
<div class="navbar" align="center"> <a href="links.html">previous</a>
|
|
<a href="../present/styles.html">next</a> <a href=
|
|
"../cover.html#minitoc">contents</a> <a href="../index/elements.html">
|
|
elements</a> <a href="../index/attributes.html">attributes</a> <a
|
|
href="../index/list.html">index</a>
|
|
|
|
<hr></div>
|
|
|
|
<h1 align="center"><a name="h-13">13</a> Objects, Images, and Applets</h1>
|
|
|
|
<div class="subtoc">
|
|
<p><strong>Contents</strong></p>
|
|
|
|
<ol>
|
|
<li><a class="tocxref" href="#h-13.1">Introduction to objects, images, and
|
|
applets</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.2">Including an image: the <samp class=
|
|
"einst2">IMG</samp> element</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.3">Generic inclusion: the <samp class=
|
|
"einst2">OBJECT</samp> element</a>
|
|
|
|
<ol>
|
|
<li><a class="tocxref" href="#h-13.3.1">Rules for rendering objects</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.3.2">Object initialization: the <samp class=
|
|
"einst2">PARAM</samp> element</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.3.3">Global naming schemes for
|
|
objects</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.3.4">Object declarations and
|
|
instantiations</a></li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li><a class="tocxref" href="#h-13.4">Including an applet: the <samp class=
|
|
"einst2">APPLET</samp> element</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.5">Notes on embedded documents</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.6"><span class="index-def" title="image
|
|
map">Image maps</span></a>
|
|
|
|
<ol>
|
|
<li><a class="tocxref" href="#h-13.6.1">Client-side image maps: the <samp
|
|
class="einst2">MAP</samp> and <samp class="einst2">AREA</samp> elements</a>
|
|
|
|
<ul>
|
|
<li><a class="tocxref" href="#h-13.6.1.1">Client-side image map
|
|
examples</a></li>
|
|
</ul>
|
|
</li>
|
|
|
|
<li><a class="tocxref" href="#h-13.6.2">Server-side image maps</a></li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li><a class="tocxref" href="#h-13.7">Visual presentation of images, objects,
|
|
and applets</a>
|
|
|
|
<ol>
|
|
<li><a class="tocxref" href="#h-13.7.1">Width and height</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.7.2">White space around images and
|
|
objects</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.7.3">Borders</a></li>
|
|
|
|
<li><a class="tocxref" href="#h-13.7.4">Alignment</a></li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li><a class="tocxref" href="#h-13.8">How to specify alternate text</a></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<h2><a name="h-13.1">13.1</a> Introduction to objects, images, and applets</h2>
|
|
|
|
<p>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.</p>
|
|
|
|
<div class="example">
|
|
<p>For example, to include a PNG image in a document, authors may write:</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Previous versions of HTML allowed authors to include images (via <a href=
|
|
"objects.html#edef-IMG" class="noxref"><samp class="einst">IMG</samp></a>) and
|
|
applets (via <a href="objects.html#edef-APPLET" class="noxref"><samp class=
|
|
"einst">APPLET</samp></a>). These elements have several limitations:</p>
|
|
|
|
<ul>
|
|
<li>They fail to solve the more general problem of how to include new and
|
|
future media types.</li>
|
|
|
|
<li>The <a href="objects.html#edef-APPLET" class="noxref"><samp class="einst">
|
|
APPLET</samp></a> element only works with Java-based applets. This element is
|
|
<a href="../conform.html#deprecated">deprecated</a> in favor of <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a>.</li>
|
|
|
|
<li>They pose accessibility problems.</li>
|
|
</ul>
|
|
|
|
<p>To address these issues, HTML 4 introduces the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element, which offers an all-purpose solution to generic object inclusion. The
|
|
<a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element allows HTML authors to specify everything required by
|
|
an 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 describe
|
|
the things that people want to place in HTML documents; other commonly used
|
|
terms for these things are: applets, plug-ins, media handlers, etc.</p>
|
|
|
|
<p>The new <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> element thus subsumes some of the tasks carried out
|
|
by existing elements. Consider the following chart of functionalities:</p>
|
|
|
|
<table summary="Table summarizing which HTML elements (IMG, OBJECT, APPLET)
|
|
include images, objects, etc. in an HTML document" border>
|
|
<thead>
|
|
<tr>
|
|
<th><strong>Type of inclusion</strong></th>
|
|
<th><strong>Specific element</strong></th>
|
|
<th><strong>Generic element</strong></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>Image</td>
|
|
<td><a href="objects.html#edef-IMG" class="noxref"><samp class="einst">
|
|
IMG</samp></a></td>
|
|
<td><a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Applet</td>
|
|
<td><a href="objects.html#edef-APPLET" class="noxref"><samp class="einst">
|
|
APPLET</samp></a> <strong>(<a href=
|
|
"../conform.html#deprecated">Deprecated</a>.)</strong></td>
|
|
<td><a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Another HTML document</td>
|
|
<td><a href="../present/frames.html#edef-IFRAME" class="noxref"><samp class=
|
|
"einst">IFRAME</samp></a></td>
|
|
<td><a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>The chart indicates that each type of inclusion has a specific and a general
|
|
solution. The generic <a href="objects.html#edef-OBJECT" class="noxref"><samp
|
|
class="einst">OBJECT</samp></a> element will serve as the solution for
|
|
implementing future media types.</p>
|
|
|
|
<p><span class="index-inst" title="image::ways to include"><a name="idx-image">
|
|
To include images</a></span>, authors may use the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element or the <a href="objects.html#edef-IMG" class="noxref"><samp class=
|
|
"einst">IMG</samp></a> element.</p>
|
|
|
|
<p><span class="index-inst" title="applet::ways to include"><a name=
|
|
"idx-applet">To include applets</a></span>, authors should use the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element as the <a href="objects.html#edef-APPLET" class="noxref"><samp class=
|
|
"einst">APPLET</samp></a> element is <a href="../conform.html#deprecated">
|
|
deprecated</a>.</p>
|
|
|
|
<p><span class="index-inst" title="document::ways to include"><a name=
|
|
"idx-document">To include one HTML document in another</a></span>, authors may
|
|
use either the new <a href="../present/frames.html#edef-IFRAME" class="noxref">
|
|
<samp class="einst">IFRAME</samp></a> element or the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element. In both cases, the embedded document remains independent of the main
|
|
document. Visual user agents may present the embedded document in a distinct
|
|
window within the main document. Please consult the <a href=
|
|
"#embedded-documents">notes on embedded documents</a> for a comparison of <a
|
|
href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> and <a href="../present/frames.html#edef-IFRAME" class=
|
|
"noxref"><samp class="einst">IFRAME</samp></a> for document inclusion.</p>
|
|
|
|
<p>Images and other included objects may have hyperlinks associated with them,
|
|
both through the standard <a href="./links.html">linking mechanisms</a>, but
|
|
also via <a href="#include-maps"><em>image maps</em></a>. An image map
|
|
specifies active geometric regions of an included object and assigns a link to
|
|
each region. When activated, these links may cause a document to be retrieved,
|
|
may run a program on the server, etc.</p>
|
|
|
|
<p>In the following sections, we discuss the various mechanisms available to
|
|
authors for multimedia inclusions and creating image maps for those
|
|
inclusions.</p>
|
|
|
|
<h2><a name="h-13.2">13.2</a> <a name="include-images">Including an image:</a>
|
|
the <a name="edef-IMG"><samp class="edef">IMG</samp></a> element</h2>
|
|
|
|
<div class="dtd-fragment">
|
|
<pre class="dtd-fragment">
|
|
<!-- 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 <a href="objects.html#edef-IMG" class="noxref"><samp class=
|
|
"einst">IMG</samp></a> - O EMPTY -- Embedded image -->
|
|
<!ATTLIST IMG
|
|
<a href=
|
|
"../sgml/dtd.html#attrs">%attrs;</a> -- <a href=
|
|
"../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href=
|
|
"../sgml/dtd.html#i18n">%i18n</a>, <a href=
|
|
"../sgml/dtd.html#events">%events</a> --
|
|
<a href="objects.html#adef-src-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">src</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #REQUIRED -- URI of image to embed --
|
|
<a href="objects.html#adef-alt" class="noxref"><samp class=
|
|
"ainst-IMG">alt</samp></a> <a href=
|
|
"../sgml/dtd.html#Text">%Text;</a> #REQUIRED -- short description --
|
|
<a href="objects.html#adef-longdesc-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">longdesc</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #IMPLIED -- link to long description
|
|
(complements alt) --
|
|
<a href="objects.html#adef-name-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">name</samp></a> <a href=
|
|
"../types.html#type-cdata">CDATA</a> #IMPLIED -- name of image for scripting --
|
|
<a href="objects.html#adef-height-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">height</samp></a> <a href=
|
|
"../sgml/dtd.html#Length">%Length;</a> #IMPLIED -- override height --
|
|
<a href="objects.html#adef-width-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">width</samp></a> <a href=
|
|
"../sgml/dtd.html#Length">%Length;</a> #IMPLIED -- override width --
|
|
<a href="objects.html#adef-usemap" class="noxref"><samp class=
|
|
"ainst-IMG">usemap</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #IMPLIED -- use client-side image map --
|
|
<a href="objects.html#adef-ismap" class="noxref"><samp class=
|
|
"ainst-IMG">ismap</samp></a> (ismap) #IMPLIED -- use server-side image map --
|
|
>
|
|
</pre>
|
|
</div>
|
|
|
|
<p><em>Start tag: <strong>required</strong>, End tag: <strong>
|
|
forbidden</strong></em></p>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-src-IMG"><samp class="adef">src</samp></a> = <a href=
|
|
"../types.html#type-uri"><em>uri</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute specifies the location of the image resource. Examples of
|
|
widely recognized image formats include GIF, JPEG, and PNG.</dd>
|
|
|
|
<dt><a name="adef-longdesc-IMG"><samp class="adef">longdesc</samp></a> = <a
|
|
href="../types.html#type-uri"><em>uri</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute specifies a link to a long description of the image. This
|
|
description should supplement the short description provided using the <a href=
|
|
"objects.html#adef-alt" class="noxref"><samp class="ainst">alt</samp></a>
|
|
attribute. When the image has an associated <a href="#include-maps">image
|
|
map</a>, this attribute should provide information about the image map's
|
|
contents. This is particularly important for server-side image maps. Since an
|
|
<a href="objects.html#edef-IMG" class="noxref"><samp class="einst">
|
|
IMG</samp></a> element may be within the content of an <a href=
|
|
"links.html#edef-A" class="noxref"><samp class="einst">A</samp></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 the
|
|
<a href="links.html#adef-href" class="noxref"><samp class="ainst">
|
|
href</samp></a> resource of the latter.</dd>
|
|
|
|
<dt><a name="adef-name-IMG"><samp class="adef">name</samp></a> = <a href=
|
|
"../types.html#type-cdata"><em>cdata</em></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute names the element so that it may be referred to from style
|
|
sheets or scripts. <strong>Note.</strong> This attribute has been included for
|
|
backwards compatibility. Applications should use the <a href=
|
|
"global.html#adef-id" class="noxref"><samp class="ainst">id</samp></a>
|
|
attribute to identify elements.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="aref-list">
|
|
<p><em>Attributes defined elsewhere</em></p>
|
|
|
|
<ul>
|
|
<li><a href="global.html#adef-id" class="noxref"><samp class="ainst">
|
|
id</samp></a>, <a href="global.html#adef-class" class="noxref"><samp class=
|
|
"ainst">class</samp></a> (<a href=
|
|
"../struct/global.html#id-and-class">document-wide identifiers</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-alt" class="noxref"><samp class="ainst">
|
|
alt</samp></a> (<a href="#alternate-text">alternate text</a>)</li>
|
|
|
|
<li><a href="dirlang.html#adef-lang" class="noxref"><samp class="ainst">
|
|
lang</samp></a> (<a href="../struct/dirlang.html#language-info">language
|
|
information</a>), <a href="dirlang.html#adef-dir" class="noxref"><samp class=
|
|
"ainst">dir</samp></a> (<a href="../struct/dirlang.html#bidirection">text
|
|
direction</a>)</li>
|
|
|
|
<li><a href="global.html#adef-title" class="noxref"><samp class="ainst">
|
|
title</samp></a> (<a href="../struct/global.html#title">element title</a>)</li>
|
|
|
|
<li><a href="../present/styles.html#adef-style" class="noxref"><samp class=
|
|
"ainst">style</samp></a> (<a href="../present/styles.html#style-element">inline
|
|
style information</a>)</li>
|
|
|
|
<li><a href="../interact/scripts.html#adef-onclick" class="noxref"><samp class=
|
|
"ainst">onclick</samp></a>, <a href="../interact/scripts.html#adef-ondblclick"
|
|
class="noxref"><samp class="ainst">ondblclick</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmousedown" class="noxref"><samp class="ainst">
|
|
onmousedown</samp></a>, <a href="../interact/scripts.html#adef-onmouseup"
|
|
class="noxref"><samp class="ainst">onmouseup</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmouseover" class="noxref"><samp class="ainst">
|
|
onmouseover</samp></a>, <a href="../interact/scripts.html#adef-onmousemove"
|
|
class="noxref"><samp class="ainst">onmousemove</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmouseout" class="noxref"><samp class="ainst">
|
|
onmouseout</samp></a>, <a href="../interact/scripts.html#adef-onkeypress"
|
|
class="noxref"><samp class="ainst">onkeypress</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onkeydown" class="noxref"><samp class="ainst">
|
|
onkeydown</samp></a>, <a href="../interact/scripts.html#adef-onkeyup" class=
|
|
"noxref"><samp class="ainst">onkeyup</samp></a> (<a href=
|
|
"../interact/scripts.html#events">intrinsic events</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-ismap" class="noxref"><samp class="ainst">
|
|
ismap</samp></a>, <a href="objects.html#adef-usemap" class="noxref"><samp
|
|
class="ainst">usemap</samp></a> (<a href="#client-side-maps">client side image
|
|
maps</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-align-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">align</samp></a>, <a href="objects.html#adef-width-IMG" class=
|
|
"noxref"><samp class="ainst-IMG">width</samp></a>, <a href=
|
|
"objects.html#adef-height-IMG" class="noxref"><samp class="ainst-IMG">
|
|
height</samp></a>, <a href="objects.html#adef-border-IMG" class="noxref"><samp
|
|
class="ainst-IMG">border</samp></a>, <a href="objects.html#adef-hspace" class=
|
|
"noxref"><samp class="ainst">hspace</samp></a>, <a href=
|
|
"objects.html#adef-vspace" class="noxref"><samp class="ainst">vspace</samp></a>
|
|
(<a href="#visual">visual presentation of objects, images, and
|
|
applets</a>)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p>The <a href="objects.html#edef-IMG" class="noxref"><samp class="einst">
|
|
IMG</samp></a> element embeds an image in the current document at the location
|
|
of the element's definition. The <a href="objects.html#edef-IMG" class=
|
|
"noxref"><samp class="einst">IMG</samp></a> element has no content; it is
|
|
usually replaced inline by the image designated by the <a href=
|
|
"objects.html#adef-src-IMG" class="noxref"><samp class="ainst-IMG">
|
|
src</samp></a> attribute, the exception being for left or right-aligned images
|
|
that are <a href="../present/graphics.html#floating">"floated"</a> out of
|
|
line.</p>
|
|
|
|
<div class="example">
|
|
<p>In an earlier example, we defined a link to a family photo. Here, we insert
|
|
the photo directly into the current document:</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
|
|
<p>This inclusion may also be achieved with the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element as follows:</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The <a href="objects.html#adef-alt" class="noxref"><samp class="ainst">
|
|
alt</samp></a> attribute specifies alternate text that is rendered when the
|
|
image cannot be displayed (see below for information on <a href=
|
|
"#alternate-text">how to specify alternate text</a> ). User agents must render
|
|
alternate text when they cannot support images, they cannot support a certain
|
|
image type or when they are configured not to display images.</p>
|
|
|
|
<div class="example">
|
|
<p>The following example shows how the <samp class="ainst">longdesc</samp>
|
|
attribute can be used to link to a richer description:</p>
|
|
|
|
<pre>
|
|
<BODY>
|
|
<P>
|
|
<IMG src="sitemap.gif"
|
|
alt="HP Labs Site Map"
|
|
longdesc="sitemap.html">
|
|
</BODY>
|
|
</pre>
|
|
|
|
<p>The <a href="objects.html#adef-alt" class="noxref"><samp class="ainst">
|
|
alt</samp></a> attribute provides a short description of the image. This should
|
|
be sufficient to allow users to decide whether they want to follow the link
|
|
given by the <span class="index-inst" title="long image description::relation
|
|
to alt text|image::long description of|accessibility::long image description">
|
|
<a name="idx-long_image_description"><samp class="ainst">
|
|
longdesc</samp></a></span> attribute to the longer description, here
|
|
"sitemap.html".</p>
|
|
</div>
|
|
|
|
<p>Please consult the section on the <a href="#visual">visual presentation of
|
|
objects, images, and applets</a> for information about image size, alignment,
|
|
and borders.</p>
|
|
|
|
<h2><a name="h-13.3">13.3</a> <a name="include-objects">Generic inclusion:</a>
|
|
the <a name="edef-OBJECT"><samp class="edef">OBJECT</samp></a> element</h2>
|
|
|
|
<div class="dtd-fragment">
|
|
<pre class="dtd-fragment">
|
|
<!ELEMENT <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> - - (PARAM | <a href=
|
|
"../sgml/dtd.html#flow">%flow;</a>)*
|
|
-- generic embedded object -->
|
|
<!ATTLIST OBJECT
|
|
<a href=
|
|
"../sgml/dtd.html#attrs">%attrs;</a> -- <a href=
|
|
"../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href=
|
|
"../sgml/dtd.html#i18n">%i18n</a>, <a href=
|
|
"../sgml/dtd.html#events">%events</a> --
|
|
<a href="objects.html#adef-declare" class="noxref"><samp class=
|
|
"ainst-OBJECT">declare</samp></a> (declare) #IMPLIED -- declare but don't instantiate flag --
|
|
<a href="objects.html#adef-classid" class="noxref"><samp class=
|
|
"ainst-OBJECT">classid</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #IMPLIED -- identifies an implementation --
|
|
<a href="objects.html#adef-codebase-OBJECT" class="noxref"><samp class=
|
|
"ainst-OBJECT">codebase</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #IMPLIED -- base URI for classid, data, archive--
|
|
<a href="objects.html#adef-data" class="noxref"><samp class=
|
|
"ainst-OBJECT">data</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #IMPLIED -- reference to object's data --
|
|
<a href="objects.html#adef-type-OBJECT" class="noxref"><samp class=
|
|
"ainst-OBJECT">type</samp></a> <a href=
|
|
"../sgml/dtd.html#ContentType">%ContentType;</a> #IMPLIED -- content type for data --
|
|
<a href="objects.html#adef-codetype" class="noxref"><samp class=
|
|
"ainst-OBJECT">codetype</samp></a> <a href=
|
|
"../sgml/dtd.html#ContentType">%ContentType;</a> #IMPLIED -- content type for code --
|
|
<a href="objects.html#adef-archive-OBJECT" class="noxref"><samp class=
|
|
"ainst-OBJECT">archive</samp></a> <a href=
|
|
"../types.html#type-cdata">CDATA</a> #IMPLIED -- space-separated list of URIs --
|
|
<a href="objects.html#adef-standby" class="noxref"><samp class=
|
|
"ainst-OBJECT">standby</samp></a> <a href=
|
|
"../sgml/dtd.html#Text">%Text;</a> #IMPLIED -- message to show while loading --
|
|
<a href="objects.html#adef-height-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">height</samp></a> <a href=
|
|
"../sgml/dtd.html#Length">%Length;</a> #IMPLIED -- override height --
|
|
<a href="objects.html#adef-width-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">width</samp></a> <a href=
|
|
"../sgml/dtd.html#Length">%Length;</a> #IMPLIED -- override width --
|
|
<a href="objects.html#adef-usemap" class="noxref"><samp class=
|
|
"ainst-OBJECT">usemap</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #IMPLIED -- use client-side image map --
|
|
<a href="../interact/forms.html#adef-name-INPUT" class="noxref"><samp class=
|
|
"ainst-INPUT">name</samp></a> <a href=
|
|
"../types.html#type-cdata">CDATA</a> #IMPLIED -- submit as part of form --
|
|
<a href="../interact/forms.html#adef-tabindex" class="noxref"><samp class=
|
|
"ainst-OBJECT">tabindex</samp></a> <a href=
|
|
"../types.html#type-number">NUMBER</a> #IMPLIED -- position in tabbing order --
|
|
>
|
|
</pre>
|
|
</div>
|
|
|
|
<p><em>Start tag: <strong>required</strong>, End tag: <strong>
|
|
required</strong></em></p>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-classid"><samp class="adef">classid</samp></a> = <a href=
|
|
"../types.html#type-uri"><em>uri</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute may be used to specify the location of an object's
|
|
implementation via a URI. It may be used together with, or as an alternative to
|
|
the <a href="objects.html#adef-data" class="noxref"><samp class="ainst">
|
|
data</samp></a> attribute, depending on the type of object involved.</dd>
|
|
|
|
<dt><a name="adef-codebase-OBJECT"><samp class="adef">codebase</samp></a> = <a
|
|
href="../types.html#type-uri"><em>uri</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute specifies the base path used to resolve relative URIs
|
|
specified by the <a href="objects.html#adef-classid" class="noxref"><samp
|
|
class="ainst">classid</samp></a>, <a href="objects.html#adef-data" class=
|
|
"noxref"><samp class="ainst">data</samp></a>, and <a href=
|
|
"objects.html#adef-archive-OBJECT" class="noxref"><samp class="ainst-OBJECT">
|
|
archive</samp></a> attributes. When absent, its default value is the base URI
|
|
of the current document.</dd>
|
|
|
|
<dt><a name="adef-codetype"><samp class="adef">codetype</samp></a> = <a href=
|
|
"../types.html#type-content-type"><em>content-type</em></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute specifies the content type of data expected when downloading
|
|
the object specified by <a href="objects.html#adef-classid" class="noxref">
|
|
<samp class="ainst">classid</samp></a>. This attribute is optional but
|
|
recommended when <a href="objects.html#adef-classid" class="noxref"><samp
|
|
class="ainst">classid</samp></a> is specified since it allows the user agent to
|
|
avoid loading information for unsupported content types. When absent, it
|
|
defaults to the value of the <samp class="ainst">type</samp> attribute.</dd>
|
|
|
|
<dt><a name="adef-data"><samp class="adef">data</samp></a> = <a href=
|
|
"../types.html#type-uri"><em>uri</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>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, a
|
|
serialized form of an object which can be used to recreate it. If given as a
|
|
relative URI, it should be interpreted relative to the <samp class="ainst">
|
|
codebase</samp> attribute.</dd>
|
|
|
|
<dt><a name="adef-type-OBJECT"><samp class="adef">type</samp></a> = <a href=
|
|
"../types.html#type-content-type"><em>content-type</em></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute specifies the content type for the data specified by <a
|
|
href="objects.html#adef-data" class="noxref"><samp class="ainst">
|
|
data</samp></a>. This attribute is optional but recommended when <a href=
|
|
"objects.html#adef-data" class="noxref"><samp class="ainst">data</samp></a> is
|
|
specified since it allows the user agent to avoid loading information for
|
|
unsupported content types. If the value of this attribute differs from the HTTP
|
|
Content-Type returned by the server when the object is retrieved, the HTTP
|
|
Content-Type takes precedence.</dd>
|
|
|
|
<dt><a name="adef-archive-OBJECT"><samp class="adef">archive</samp></a> = <a
|
|
href="../types.html#type-uri"><em>uri-list</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute may be used to specify a <em>space-separated</em> list of
|
|
URIs for archives containing resources relevant to the object, which may
|
|
include the resources specified by the <a href="objects.html#adef-classid"
|
|
class="noxref"><samp class="ainst">classid</samp></a> and <a href=
|
|
"objects.html#adef-data" class="noxref"><samp class="ainst">data</samp></a>
|
|
attributes. Preloading archives will generally result in reduced load times for
|
|
objects. Archives specified as relative URIs should be interpreted relative to
|
|
the <samp class="ainst">codebase</samp> attribute.</dd>
|
|
|
|
<dt><a name="adef-declare"><samp class="adef">declare</samp></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>When present, this boolean attribute makes the current <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
definition a declaration only. The object must be instantiated by a subsequent
|
|
<a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> definition referring to this declaration.</dd>
|
|
|
|
<dt><a name="adef-standby"><samp class="adef">standby</samp></a> = <a href=
|
|
"../types.html#type-text"><em>text</em></a> <a href=
|
|
"../types.html#case-sensitive">[CS]</a></dt>
|
|
|
|
<dd>This attribute specifies a message that a user agent may render while
|
|
loading the object's implementation and data.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="aref-list">
|
|
<p><em>Attributes defined elsewhere</em></p>
|
|
|
|
<ul>
|
|
<li><a href="global.html#adef-id" class="noxref"><samp class="ainst">
|
|
id</samp></a>, <a href="global.html#adef-class" class="noxref"><samp class=
|
|
"ainst">class</samp></a> (<a href=
|
|
"../struct/global.html#id-and-class">document-wide identifiers</a>)</li>
|
|
|
|
<li><a href="dirlang.html#adef-lang" class="noxref"><samp class="ainst">
|
|
lang</samp></a> (<a href="../struct/dirlang.html#language-info">language
|
|
information</a>), <a href="dirlang.html#adef-dir" class="noxref"><samp class=
|
|
"ainst">dir</samp></a> (<a href="../struct/dirlang.html#bidirection">text
|
|
direction</a>)</li>
|
|
|
|
<li><a href="global.html#adef-title" class="noxref"><samp class="ainst">
|
|
title</samp></a> (<a href="../struct/global.html#title">element title</a>)</li>
|
|
|
|
<li><a href="../present/styles.html#adef-style" class="noxref"><samp class=
|
|
"ainst">style</samp></a> (<a href="../present/styles.html#style-element">inline
|
|
style information</a>)</li>
|
|
|
|
<li><a href="../interact/scripts.html#adef-onclick" class="noxref"><samp class=
|
|
"ainst">onclick</samp></a>, <a href="../interact/scripts.html#adef-ondblclick"
|
|
class="noxref"><samp class="ainst">ondblclick</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmousedown" class="noxref"><samp class="ainst">
|
|
onmousedown</samp></a>, <a href="../interact/scripts.html#adef-onmouseup"
|
|
class="noxref"><samp class="ainst">onmouseup</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmouseover" class="noxref"><samp class="ainst">
|
|
onmouseover</samp></a>, <a href="../interact/scripts.html#adef-onmousemove"
|
|
class="noxref"><samp class="ainst">onmousemove</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmouseout" class="noxref"><samp class="ainst">
|
|
onmouseout</samp></a>, <a href="../interact/scripts.html#adef-onkeypress"
|
|
class="noxref"><samp class="ainst">onkeypress</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onkeydown" class="noxref"><samp class="ainst">
|
|
onkeydown</samp></a>, <a href="../interact/scripts.html#adef-onkeyup" class=
|
|
"noxref"><samp class="ainst">onkeyup</samp></a> (<a href=
|
|
"../interact/scripts.html#events">intrinsic events</a>)</li>
|
|
|
|
<li><a href="../interact/forms.html#adef-tabindex" class="noxref"><samp class=
|
|
"ainst">tabindex</samp></a> (<a href=
|
|
"../interact/forms.html#tabbing-navigation">tabbing navigation</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-usemap" class="noxref"><samp class="ainst">
|
|
usemap</samp></a> (<a href="#client-side-maps">client side image maps</a>)</li>
|
|
|
|
<li><a href="../interact/forms.html#adef-name-INPUT" class="noxref"><samp
|
|
class="ainst-INPUT">name</samp></a> (<a href=
|
|
"../interact/forms.html#submit-format">form submission</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-align-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">align</samp></a>, <a href="objects.html#adef-width-IMG" class=
|
|
"noxref"><samp class="ainst-IMG">width</samp></a>, <a href=
|
|
"objects.html#adef-height-IMG" class="noxref"><samp class="ainst-IMG">
|
|
height</samp></a>, <a href="objects.html#adef-border-IMG" class="noxref"><samp
|
|
class="ainst-IMG">border</samp></a>, <a href="objects.html#adef-hspace" class=
|
|
"noxref"><samp class="ainst">hspace</samp></a>, <a href=
|
|
"objects.html#adef-vspace" class="noxref"><samp class="ainst">vspace</samp></a>
|
|
(<a href="#visual">visual presentation of objects, images, and
|
|
applets</a>)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p><span class="index-inst" title="object::generic inclusion|including an
|
|
object"><a name="idx-object">Most user agents have built-in
|
|
mechanisms</a></span> for rendering common data types such as text, GIF images,
|
|
colors, fonts, and a handful of graphic elements. To render data types they
|
|
don't support natively, user agents generally run external applications. The <a
|
|
href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element allows authors to control whether data should be
|
|
rendered externally or by some program, specified by the author, that renders
|
|
the data within the user agent.</p>
|
|
|
|
<p>In the most general case, an author may need to specify three types of
|
|
information:</p>
|
|
|
|
<ul>
|
|
<li>The implementation of the included object. For instance, if the included
|
|
object is a clock applet, the author must indicate the location of the applet's
|
|
executable code.</li>
|
|
|
|
<li>The data to be rendered. For instance, if the included object is a program
|
|
that renders font data, the author must indicate the location of that
|
|
data.</li>
|
|
|
|
<li>Additional values required by the object at run-time. For example, some
|
|
applets may require initial values for parameters.</li>
|
|
</ul>
|
|
|
|
<p>The <a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element allows authors to specify all three types of data,
|
|
but authors may not have to specify all three at once. For example, some
|
|
objects may not require data (e.g., a self-contained applet that performs a
|
|
small animation). Others may not require run-time initialization. Still others
|
|
may not require additional implementation information, i.e., the user agent
|
|
itself may already know how to render that type of data (e.g., GIF images).</p>
|
|
|
|
<p><span class="index-inst" title="object::locating implementation and data"><a
|
|
name="idx-object-1">Authors specify an object's implementation</a></span> and
|
|
the location of the data to be rendered via the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element. To specify run-time values, however, authors use the <a href=
|
|
"objects.html#edef-PARAM" class="noxref"><samp class="einst">PARAM</samp></a>
|
|
element, which is discussed in the section on <a href="#object-init">object
|
|
initialization.</a></p>
|
|
|
|
<p><span class="index-inst" title="object::in HEAD">The <a name="idx-object-2"
|
|
href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element may also appear in the content</span> of the <a href=
|
|
"global.html#edef-HEAD" class="noxref"><samp class="einst">HEAD</samp></a>
|
|
element. Since user agents generally do not render elements in the <a href=
|
|
"global.html#edef-HEAD" class="noxref"><samp class="einst">HEAD</samp></a>,
|
|
authors should ensure that any <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a> elements in the <a href=
|
|
"global.html#edef-HEAD" class="noxref"><samp class="einst">HEAD</samp></a> do
|
|
not specify content that may be rendered. Please consult the section on <a
|
|
href="../present/frames.html#sharing-frame-data">sharing frame data</a> for an
|
|
example of including the <a href="objects.html#edef-OBJECT" class="noxref">
|
|
<samp class="einst">OBJECT</samp></a> element in the <a href=
|
|
"global.html#edef-HEAD" class="noxref"><samp class="einst">HEAD</samp></a>
|
|
element.</p>
|
|
|
|
<p>Please consult the section on <a href=
|
|
"../interact/forms.html#form-controls">form controls</a> for information about
|
|
<a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> elements in forms.</p>
|
|
|
|
<p>This document does not specify the behavior of <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
elements that use both the <a href="objects.html#adef-classid" class="noxref">
|
|
<samp class="ainst">classid</samp></a> attribute to identify an implementation
|
|
and the <a href="objects.html#adef-data" class="noxref"><samp class="ainst">
|
|
data</samp></a> attribute to specify data for that implementation. In order to
|
|
ensure portability, authors should use the <a href="objects.html#edef-PARAM"
|
|
class="noxref"><samp class="einst">PARAM</samp></a> element to tell
|
|
implementations where to retrieve additional data.</p>
|
|
|
|
<h3><a name="h-13.3.1">13.3.1</a> <span class="index-inst" title=
|
|
"object::fallback rendering of|object::rules for embedded"><a name=
|
|
"idx-object-3">Rules for rendering objects</a></span></h3>
|
|
|
|
<p>A user agent must interpret an <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a> element according to the
|
|
following precedence rules:</p>
|
|
|
|
<ol>
|
|
<li>The user agent must first try to render the object. It should not render
|
|
the element's contents, but it must examine them in case the element contains
|
|
any direct children that are <a href="objects.html#edef-PARAM" class="noxref">
|
|
<samp class="einst">PARAM</samp></a> elements (see <a href="#object-init">
|
|
object initialization</a>) or <a href="objects.html#edef-MAP" class="noxref">
|
|
<samp class="einst">MAP</samp></a> elements (see <a href="#client-side-maps">
|
|
client-side image maps</a>).</li>
|
|
|
|
<li>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 try
|
|
to render its contents.</li>
|
|
</ol>
|
|
|
|
<p><span class="index-inst" title="object::in HEAD"><a name="idx-object-5">
|
|
Authors should not include</a></span> content in <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
elements that appear in the <a href="global.html#edef-HEAD" class="noxref">
|
|
<samp class="einst">HEAD</samp></a> element.</p>
|
|
|
|
<div class="example">
|
|
<p>In the following example, we insert an analog clock applet in a document via
|
|
the <a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element. The applet, written in the Python language, requires
|
|
no additional data or run-time values. The <a href="objects.html#adef-classid"
|
|
class="noxref"><samp class="ainst">classid</samp></a> attribute specifies the
|
|
location of the applet:</p>
|
|
|
|
<pre>
|
|
|
|
<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p>Note that the clock will be rendered as soon as the user agent interprets
|
|
this <a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> declaration. It is possible to delay rendering of an object
|
|
by first <em>declaring</em> the object (described below).</p>
|
|
|
|
<p>Authors should complete this declaration by including alternate text as the
|
|
contents of <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> in case the user agent cannot render the clock.</p>
|
|
|
|
<pre>
|
|
|
|
<P><OBJECT classid="http://www.miamachina.it/analogclock.py">
|
|
An animated clock.
|
|
</OBJECT>
|
|
</pre>
|
|
</div>
|
|
|
|
<p><span class="index-inst" title="accessibility::alternate object content"><a
|
|
name="idx-accessibility-1">One significant consequence</a></span> of the <a
|
|
href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element's design is that it offers a mechanism for specifying
|
|
alternate object renderings; each embedded <a href="objects.html#edef-OBJECT"
|
|
class="noxref"><samp class="einst">OBJECT</samp></a> declaration may specify
|
|
alternate content types. If a user agent cannot render the outermost <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a>, it tries to render the contents, which may be another <a
|
|
href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element, etc.</p>
|
|
|
|
<div class="example">
|
|
<p>In the following example, we embed several <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
declarations to illustrate how alternate renderings work. A user agent will
|
|
attempt to render the first <a href="objects.html#edef-OBJECT" class="noxref">
|
|
<samp class="einst">OBJECT</samp></a> element it can, in the following order:
|
|
(1) an Earth applet written in the Python language, (2) an MPEG animation of
|
|
the Earth, (3) a GIF image of the Earth, (4) alternate text.</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
|
|
<p>The outermost declaration specifies an applet that requires no data or
|
|
initial values. The second declaration specifies an MPEG animation and, since
|
|
it does not define the location of an implementation to handle MPEG, relies on
|
|
the user agent to handle the animation. We also set the <samp class="ainst">
|
|
type</samp> attribute so that a user agent that knows it cannot render MPEG
|
|
will not bother to retrieve "TheEarth.mpeg" from the network. The third
|
|
declaration specifies the location of a GIF file and furnishes alternate text
|
|
in case all other mechanisms fail.</p>
|
|
</div>
|
|
|
|
<div class="note">
|
|
<p><em><strong>Inline vs. external data.</strong> Data to be rendered may be
|
|
supplied in two ways: inline and from an external resource. While the former
|
|
method will generally lead to faster rendering, it is not convenient when
|
|
rendering large quantities of data.</em></p>
|
|
|
|
<p><em>Here's an example that illustrates how inline data may be fed to an <a
|
|
href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a>:</em></p>
|
|
|
|
<pre>
|
|
<P>
|
|
<OBJECT id="clock1"
|
|
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
|
|
data="data:application/x-oleobject;base64, <em>...base64 data...</em>">
|
|
A clock.
|
|
</OBJECT>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Please consult the section on the <a href="#visual">visual presentation of
|
|
objects, images, and applets</a> for information about object size, alignment,
|
|
and borders.</p>
|
|
|
|
<h3><a name="h-13.3.2">13.3.2</a> <span class="index-inst" title=
|
|
"object::initialization"><a name="object-init">Object
|
|
initialization:</a></span> the <a name="edef-PARAM"><samp class="edef">
|
|
PARAM</samp></a> element</h3>
|
|
|
|
<div class="dtd-fragment">
|
|
<pre class="dtd-fragment">
|
|
<!ELEMENT <a href="objects.html#edef-PARAM" class="noxref"><samp class=
|
|
"einst">PARAM</samp></a> - O EMPTY -- named property value -->
|
|
<!ATTLIST PARAM
|
|
<a href="global.html#adef-id" class="noxref"><samp class=
|
|
"ainst">id</samp></a> <a href=
|
|
"../types.html#type-id">ID</a> #IMPLIED -- document-wide unique id --
|
|
<a href="objects.html#adef-name-PARAM" class="noxref"><samp class=
|
|
"ainst-PARAM">name</samp></a> <a href=
|
|
"../types.html#type-cdata">CDATA</a> #REQUIRED -- property name --
|
|
<a href="objects.html#adef-value-PARAM" class="noxref"><samp class=
|
|
"ainst-PARAM">value</samp></a> <a href=
|
|
"../types.html#type-cdata">CDATA</a> #IMPLIED -- property value --
|
|
<a href="objects.html#adef-valuetype" class="noxref"><samp class=
|
|
"ainst-PARAM">valuetype</samp></a> (DATA|REF|OBJECT) DATA -- How to interpret value --
|
|
<a href="objects.html#adef-type-PARAM" class="noxref"><samp class=
|
|
"ainst-PARAM">type</samp></a> <a href=
|
|
"../sgml/dtd.html#ContentType">%ContentType;</a> #IMPLIED -- content type for value
|
|
when valuetype=ref --
|
|
>
|
|
</pre>
|
|
</div>
|
|
|
|
<p><em>Start tag: <strong>required</strong>, End tag: <strong>
|
|
forbidden</strong></em></p>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-name-PARAM"><samp class="adef">name</samp></a> = <a href=
|
|
"../types.html#type-cdata"><em>cdata</em></a></dt>
|
|
|
|
<dd>This attribute defines the name of a run-time parameter, assumed to be
|
|
known by the inserted object. Whether the property name is case-sensitive
|
|
depends on the specific object implementation.</dd>
|
|
|
|
<dt><a name="adef-value-PARAM"><samp class="adef">value</samp></a> = <a href=
|
|
"../types.html#type-cdata"><em>cdata</em></a></dt>
|
|
|
|
<dd>This attribute specifies the value of a run-time parameter specified by <a
|
|
href="objects.html#adef-name-PARAM" class="noxref"><samp class="ainst-PARAM">
|
|
name</samp></a>. Property values have no meaning to HTML; their meaning is
|
|
determined by the object in question.</dd>
|
|
|
|
<dt><a name="adef-valuetype"><samp class="adef">valuetype</samp></a> = <samp>
|
|
data|ref|object</samp> <a href="../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute specifies the type of the <samp>value</samp> attribute.
|
|
Possible values:
|
|
|
|
<ul>
|
|
<li><samp>data:</samp> This is default value for the attribute. It means that
|
|
the value specified by <samp class="ainst">value</samp> will be evaluated and
|
|
passed to the object's implementation as a string.</li>
|
|
|
|
<li><samp>ref:</samp> The value specified by <samp class="ainst">value</samp>
|
|
is a URI that designates a resource where run-time values are stored. This
|
|
allows support tools to identify URIs given as parameters. The URI must be
|
|
passed to the object <strong>as is</strong>, i.e., unresolved.</li>
|
|
|
|
<li><samp>object:</samp> The value specified by <samp class="ainst">
|
|
value</samp> is an identifier that refers to an <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
declaration in the same document. The identifier must be the value of the <a
|
|
href="global.html#adef-id" class="noxref"><samp class="ainst">id</samp></a>
|
|
attribute set for the declared <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a> element.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt><a name="adef-type-PARAM"><samp class="adef">type</samp></a> = <a href=
|
|
"../types.html#type-content-type"><em>content-type</em></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute specifies the content type of the resource designated by the
|
|
<samp class="ainst">value</samp> attribute <strong>only</strong> in the case
|
|
where <a href="objects.html#adef-valuetype" class="noxref"><samp class="ainst">
|
|
valuetype</samp></a> is set to "ref". This attribute thus specifies for the
|
|
user agent, the type of values that will be found at the URI designated by
|
|
<samp class="ainst">value</samp>.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="aref-list">
|
|
<p><em>Attributes defined elsewhere</em></p>
|
|
|
|
<ul>
|
|
<li><a href="global.html#adef-id" class="noxref"><samp class="ainst">
|
|
id</samp></a> (<a href="../struct/global.html#id-and-class">document-wide
|
|
identifiers</a>)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p><a href="objects.html#edef-PARAM" class="noxref"><samp class="einst">
|
|
PARAM</samp></a> elements specify a set of values that may be required by an
|
|
object at run-time. Any number of <a href="objects.html#edef-PARAM" class=
|
|
"noxref"><samp class="einst">PARAM</samp></a> elements may appear in the
|
|
content of an <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> or <a href="objects.html#edef-APPLET" class="noxref">
|
|
<samp class="einst">APPLET</samp></a> element, in any order, but must be placed
|
|
at the start of the content of the enclosing <a href="objects.html#edef-OBJECT"
|
|
class="noxref"><samp class="einst">OBJECT</samp></a> or <a href=
|
|
"objects.html#edef-APPLET" class="noxref"><samp class="einst">APPLET</samp></a>
|
|
element.</p>
|
|
|
|
<p>The syntax of names and values is assumed to be understood by the object's
|
|
implementation. This document does not specify how user agents should retrieve
|
|
name/value pairs nor how they should interpret parameter names that appear
|
|
twice.</p>
|
|
|
|
<div class="example">
|
|
<p>We return to the clock example to illustrate the use of <a href=
|
|
"objects.html#edef-PARAM" class="noxref"><samp class="einst">PARAM</samp></a>:
|
|
suppose that the applet is able to handle two run-time parameters that define
|
|
its initial height and width. We can set the initial dimensions to 40x40 pixels
|
|
with two <a href="objects.html#edef-PARAM" class="noxref"><samp class="einst">
|
|
PARAM</samp></a> elements.</p>
|
|
|
|
<pre>
|
|
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>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 the
|
|
<a href="objects.html#adef-valuetype" class="noxref"><samp class="ainst">
|
|
valuetype</samp></a> attribute is thus set to "ref" and the <samp class=
|
|
"ainst">value</samp> is a URI designating the resource.</p>
|
|
|
|
<pre>
|
|
<P><OBJECT classid="http://www.gifstuff.com/gifappli"
|
|
standby="Loading Elvis...">
|
|
<PARAM name="Init_values"
|
|
value="./images/elvis.gif">
|
|
valuetype="ref">
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p>Note that we have also set the <a href="objects.html#adef-standby" class=
|
|
"noxref"><samp class="ainst-OBJECT">standby</samp></a> attribute so that the
|
|
user agent may display a message while the rendering mechanism loads.</p>
|
|
</div>
|
|
|
|
<p>When an <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> element is rendered, user agents must search the
|
|
content for only those <a href="objects.html#edef-PARAM" class="noxref"><samp
|
|
class="einst">PARAM</samp></a> elements that are direct children and "feed"
|
|
them to the <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a>.</p>
|
|
|
|
<div class="example">
|
|
<p>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" is
|
|
ignored, and "param2" applies to "obj2". If neither <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
is rendered, neither <a href="objects.html#edef-PARAM" class="noxref"><samp
|
|
class="einst">PARAM</samp></a> applies.</p>
|
|
|
|
<pre>
|
|
<P>
|
|
<OBJECT id="obj1">
|
|
<PARAM name="param1">
|
|
<OBJECT id="obj2">
|
|
<PARAM name="param2">
|
|
</OBJECT>
|
|
</OBJECT>
|
|
</pre>
|
|
</div>
|
|
|
|
<h3><a name="h-13.3.3">13.3.3</a> <span class="index-inst" title=
|
|
"object::naming schemes for"><a name="idx-object-7">Global naming schemes for
|
|
objects</a></span></h3>
|
|
|
|
<p>The location of an object's implementation is given by a URI. As we
|
|
discussed in the <a href="../intro/intro.html#intro-uris">introduction to
|
|
URIs</a>, the first segment of an absolute URI specifies the naming scheme used
|
|
to transfer the data designated by the URI. For HTML documents, this scheme is
|
|
frequently "http". Some applets might employ other naming schemes. For
|
|
instance, when specifying a Java applet, authors may use URIs that begin with
|
|
"java" and for ActiveX applets, authors may use "clsid".</p>
|
|
|
|
<div class="example">
|
|
<p>In the following example, we insert a Java applet into an HTML document.</p>
|
|
|
|
<pre>
|
|
<P><OBJECT classid="java:program.start">
|
|
</OBJECT>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>By setting the <a href="objects.html#adef-codetype" class="noxref"><samp
|
|
class="ainst">codetype</samp></a> attribute, a user agent can decide whether to
|
|
retrieve the Java application based on its ability to do so.</p>
|
|
|
|
<pre>
|
|
<OBJECT codetype="application/java-archive"
|
|
classid="java:program.start">
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p>Some rendering schemes require additional information to identify their
|
|
implementation and must be told where to find that information. Authors may
|
|
give path information to the object's implementation via the <a href=
|
|
"objects.html#adef-codebase-APPLET" class="noxref"><samp class="ainst-APPLET">
|
|
codebase</samp></a> attribute.</p>
|
|
|
|
<pre>
|
|
<OBJECT codetype="application/java-archive"
|
|
classid="java:program.start">
|
|
codebase="http://foooo.bar.com/java/myimplementation/"
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<div class="example">
|
|
<p>The following example specifies (with the <a href=
|
|
"objects.html#adef-classid" class="noxref"><samp class="ainst">
|
|
classid</samp></a> attribute) an ActiveX object via a URI that begins with the
|
|
naming scheme "clsid". The <a href="objects.html#adef-data" class="noxref">
|
|
<samp class="ainst-OBJECT">data</samp></a> attribute locates the data to render
|
|
(another clock).</p>
|
|
|
|
<pre>
|
|
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
|
|
data="http://www.acme.com/ole/clock.stm">
|
|
This application is not supported.
|
|
</OBJECT>
|
|
</pre>
|
|
</div>
|
|
|
|
<h3><a name="h-13.3.4">13.3.4</a> <span class="index-inst" title=
|
|
"object::statically declared"><a name="object-declare">Object declarations and
|
|
instantiations</a></span></h3>
|
|
|
|
The preceding examples have only illustrated isolated object definitions. 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:
|
|
|
|
<ul>
|
|
<li>Data may be retrieved from the network by the user agent <em>one time</em>
|
|
(during the declaration) and reused for each instantiation.</li>
|
|
|
|
<li>It is possible to instantiate an object from a location other than the
|
|
object's declaration, for example, from a link.</li>
|
|
|
|
<li>It is possible to specify objects as run-time data for other objects.</li>
|
|
</ul>
|
|
|
|
<p>To declare an object so that it is not executed when read by the user agent,
|
|
set the boolean <a href="objects.html#adef-declare" class="noxref"><samp class=
|
|
"ainst">declare</samp></a> attribute in the <a href="objects.html#edef-OBJECT"
|
|
class="noxref"><samp class="einst">OBJECT</samp></a> element. At the same time,
|
|
authors must identify the declaration by setting the <a href=
|
|
"global.html#adef-id" class="noxref"><samp class="ainst">id</samp></a>
|
|
attribute in the <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> element to a unique value. Later instantiations of
|
|
the object will refer to this identifier.</p>
|
|
|
|
<p>A declared <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> must appear in a document before the first instance
|
|
of that <a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a>.</p>
|
|
|
|
<p>An object defined with the <a href="objects.html#adef-declare" class=
|
|
"noxref"><samp class="ainst">declare</samp></a> attribute is instantiated every
|
|
time an element that refers to that object requires it to be rendered (e.g., a
|
|
link that refers to it is activated, an object that refers to it is activated,
|
|
etc.).</p>
|
|
|
|
<div class="example">
|
|
<p>In the following example, we declare an <a href="objects.html#edef-OBJECT"
|
|
class="noxref"><samp class="einst">OBJECT</samp></a> and cause it to be
|
|
instantiated by referring to it from a link. Thus, the object can be activated
|
|
by clicking on some highlighted text, for example.</p>
|
|
|
|
<pre>
|
|
<P><OBJECT declare
|
|
id="earth.declaration"
|
|
data="TheEarth.mpeg"
|
|
type="application/mpeg">
|
|
The <STRONG>Earth</STRONG> as seen from space.
|
|
</OBJECT>
|
|
<em>...later in the document...</em>
|
|
<P>A neat <A href="#earth.declaration"> animation of The Earth!</A>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following example illustrates how to specify run-time values that are
|
|
other objects. In this example, we send text (a poem, in fact) to a
|
|
hypothetical mechanism for viewing poems. The object recognizes a run-time
|
|
parameter 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 not
|
|
render) the font object. The relationship between the font object and the poem
|
|
viewer object is achieved by (1) assigning the <a href="global.html#adef-id"
|
|
class="noxref"><samp class="ainst">id</samp></a> "tribune" to the font object
|
|
declaration and (2) referring to it from the <a href="objects.html#edef-PARAM"
|
|
class="noxref"><samp class="einst">PARAM</samp></a> element of the poem viewer
|
|
object (with <a href="objects.html#adef-valuetype" class="noxref"><samp class=
|
|
"ainst">valuetype</samp></a> and <samp class="ainst">value</samp>).</p>
|
|
|
|
<pre>
|
|
<P><OBJECT declare
|
|
id="tribune"
|
|
type="application/x-webfont"
|
|
data="tribune.gif">
|
|
</OBJECT>
|
|
<em>...view the poem in KublaKhan.txt here...</em>
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>User agents that don't support the <a href="objects.html#adef-declare"
|
|
class="noxref"><samp class="ainst">declare</samp></a> attribute must render the
|
|
contents of the <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> declaration.</p>
|
|
|
|
<h2><a name="h-13.4">13.4</a> <a name="include-applets">Including an
|
|
applet</a>: the <a name="edef-APPLET"><samp class="edef">APPLET</samp></a>
|
|
element</h2>
|
|
|
|
<strong>APPLET is <a href="../conform.html#deprecated">deprecated (with all its
|
|
attributes)</a> in favor of <a href="objects.html#edef-OBJECT" class="noxref">
|
|
<samp class="einst">OBJECT</samp></a>.</strong>
|
|
|
|
<p>See the <a href="../sgml/loosedtd.html#applet">Transitional DTD</a> for the
|
|
formal definition.</p>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-codebase-APPLET"><samp class="adef">codebase</samp></a> = <a
|
|
href="../types.html#type-uri"><em>uri</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute specifies the base URI for the applet. If this attribute is
|
|
not specified, then it defaults the same base URI as for the current document.
|
|
Values for this attribute may only refer to subdirectories of the directory
|
|
containing the current document. <span class="note"><em><strong>Note.</strong>
|
|
While the restriction on subdirectories is a departure from common practice and
|
|
the HTML 3.2 specification, the HTML Working Group has chosen to leave the
|
|
restriction in this version of the specification for security
|
|
reasons.</em></span></dd>
|
|
|
|
<dt><a name="adef-code"><samp class="adef">code</samp></a> = <a href=
|
|
"../types.html#type-cdata"><em>cdata</em></a> <a href=
|
|
"../types.html#case-sensitive">[CS]</a></dt>
|
|
|
|
<dd>This attribute specifies either the name of the class file that contains
|
|
the applet's compiled applet subclass or the path to get the class, including
|
|
the class file itself. It is interpreted with respect to the applet's codebase.
|
|
One of <a href="objects.html#adef-code" class="noxref"><samp class="ainst">
|
|
code</samp></a> or <a href="objects.html#adef-object" class="noxref"><samp
|
|
class="ainst">object</samp></a> must be present.</dd>
|
|
|
|
<dt><a name="adef-name-APPLET"><samp class="adef">name</samp></a> = <a href=
|
|
"../types.html#type-cdata"><em>cdata</em></a> <a href=
|
|
"../types.html#case-sensitive">[CS]</a></dt>
|
|
|
|
<dd>This attribute specifies a name for the applet instance, which makes it
|
|
possible for applets on the same page to find (and communicate with) each
|
|
other.</dd>
|
|
|
|
<dt><a name="adef-archive-APPLET"><samp class="adef">archive</samp></a> = <a
|
|
href="../types.html#type-uri"><em>uri-list</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute specifies a <em>comma-separated</em> list of URIs for
|
|
archives containing classes and other resources that will be "preloaded". The
|
|
classes are loaded using an instance of an AppletClassLoader with the given <a
|
|
href="objects.html#adef-codebase-APPLET" class="noxref"><samp class=
|
|
"ainst-APPLET">codebase</samp></a>. Relative URIs for archives are interpreted
|
|
with respect to the applet's codebase. Preloading resources can significantly
|
|
improve the performance of applets.</dd>
|
|
|
|
<dt><a name="adef-object"><samp class="adef">object</samp></a> = <a href=
|
|
"../types.html#type-cdata"><em>cdata</em></a> <a href=
|
|
"../types.html#case-sensitive">[CS]</a></dt>
|
|
|
|
<dd>This attribute names a resource containing a serialized representation of
|
|
an applet's state. It is interpreted relative to the applet's codebase. The
|
|
serialized data contains the applet's class name but not the implementation.
|
|
The class name is used to retrieve the implementation from a class file or
|
|
archive.
|
|
|
|
<p>When the applet is "deserialized" the <samp>start()</samp> method is invoked
|
|
but not the <samp>init()</samp> method. Attributes valid when the original
|
|
object was serialized are <strong>not</strong> restored. Any attributes passed
|
|
to this <a href="objects.html#edef-APPLET" class="noxref"><samp class="einst">
|
|
APPLET</samp></a> instance will be available to the applet. Authors should use
|
|
this feature with extreme caution. An applet should be stopped before it is
|
|
serialized.</p>
|
|
|
|
<p>Either <a href="objects.html#adef-code" class="noxref"><samp class="ainst">
|
|
code</samp></a> or <a href="objects.html#adef-object" class="noxref"><samp
|
|
class="ainst">object</samp></a> must be present. If both <a href=
|
|
"objects.html#adef-code" class="noxref"><samp class="ainst">code</samp></a> and
|
|
<a href="objects.html#adef-object" class="noxref"><samp class="ainst">
|
|
object</samp></a> are given, it is an error if they provide different class
|
|
names.</p>
|
|
</dd>
|
|
|
|
<dt><a name="adef-width-APPLET"><samp class="adef">width</samp></a> = <a href=
|
|
"../types.html#type-length"><em>length</em></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute specifies the initial width of the applet's display area
|
|
(excluding any windows or dialogs that the applet creates).</dd>
|
|
|
|
<dt><a name="adef-height-APPLET"><samp class="adef">height</samp></a> = <a
|
|
href="../types.html#type-length"><em>length</em></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute specifies the initial height of the applet's display area
|
|
(excluding any windows or dialogs that the applet creates).</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="aref-list">
|
|
<p><em>Attributes defined elsewhere</em></p>
|
|
|
|
<ul>
|
|
<li><a href="global.html#adef-id" class="noxref"><samp class="ainst">
|
|
id</samp></a>, <a href="global.html#adef-class" class="noxref"><samp class=
|
|
"ainst">class</samp></a> (<a href=
|
|
"../struct/global.html#id-and-class">document-wide identifiers</a>)</li>
|
|
|
|
<li><a href="global.html#adef-title" class="noxref"><samp class="ainst">
|
|
title</samp></a> (<a href="../struct/global.html#title">element title</a>)</li>
|
|
|
|
<li><a href="../present/styles.html#adef-style" class="noxref"><samp class=
|
|
"ainst">style</samp></a> (<a href="../present/styles.html#style-element">inline
|
|
style information</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-alt" class="noxref"><samp class="ainst">
|
|
alt</samp></a> (<a href="#alternate-text">alternate text</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-align-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">align</samp></a>, <a href="objects.html#adef-hspace" class=
|
|
"noxref"><samp class="ainst">hspace</samp></a>, <a href=
|
|
"objects.html#adef-vspace" class="noxref"><samp class="ainst">vspace</samp></a>
|
|
(<a href="#visual">visual presentation of objects, images, and
|
|
applets</a>)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p>This element, supported by all Java-enabled browsers, allows designers to
|
|
embed a Java applet in an HTML document. It has been <a href=
|
|
"../conform.html#deprecated">deprecated</a> in favor of the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element.</p>
|
|
|
|
<p>The content of the <a href="objects.html#edef-APPLET" class="noxref"><samp
|
|
class="einst">APPLET</samp></a> acts as alternate information for user agents
|
|
that don't support this element or are currently configured not to support
|
|
applets. User agents must ignore the content otherwise.</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><span class="example-title">DEPRECATED EXAMPLE:</span>
|
|
<br>
|
|
In the following example, the <a href="objects.html#edef-APPLET" class=
|
|
"noxref"><samp class="einst">APPLET</samp></a> element includes a Java applet
|
|
in the document. Since no <a href="objects.html#adef-codebase-APPLET" class=
|
|
"noxref"><samp class="ainst-APPLET">codebase</samp></a> is supplied, the applet
|
|
is assumed to be in the same directory as the current document.</p>
|
|
|
|
<pre>
|
|
<APPLET code="Bubbles.class" width="500" height="500">
|
|
Java applet that draws animated bubbles.
|
|
</APPLET>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>This example may be rewritten with <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a> as follows:</p>
|
|
|
|
<pre>
|
|
<P><OBJECT codetype="application/java"
|
|
classid="java:Bubbles.class"
|
|
width="500" height="500">
|
|
Java applet that draws animated bubbles.
|
|
</OBJECT>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Initial values may be supplied to the applet via the <a href=
|
|
"objects.html#edef-PARAM" class="noxref"><samp class="einst">PARAM</samp></a>
|
|
element.</p>
|
|
|
|
<div class="deprecated-example">
|
|
<p><span class="example-title">DEPRECATED EXAMPLE:</span>
|
|
<br>
|
|
The following sample Java applet:</p>
|
|
|
|
<pre>
|
|
<APPLET code="AudioItem" width="15" height="15">
|
|
<PARAM name="snd" value="Hello.au|Welcome.au">
|
|
Java applet that plays a welcoming sound.
|
|
</APPLET>
|
|
</pre>
|
|
|
|
<p>may be rewritten as follows with <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a>:</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<h2><a name="h-13.5">13.5</a> <a name="embedded-documents">Notes on embedded
|
|
documents</a></h2>
|
|
|
|
Sometimes, rather than <a href="links.html">linking</a> to a document, an
|
|
author may want to embed it directly into a primary HTML document. Authors may
|
|
use either the <a href="../present/frames.html#edef-IFRAME" class="noxref">
|
|
<samp class="einst">IFRAME</samp></a> element or the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element for this purpose, but the elements differ in some ways. Not only do the
|
|
two elements have different content models, the <a href=
|
|
"../present/frames.html#edef-IFRAME" class="noxref"><samp class="einst">
|
|
IFRAME</samp></a> element may be a target frame (see the section on <a href=
|
|
"../present/frames.html#target-info">specifying target frame information</a>
|
|
for 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 in
|
|
ways that distinguish them from unselected frames (e.g., by drawing a border
|
|
around the selected frame).
|
|
|
|
<p><span class="index-inst" title="document::ways to embed"><a name=
|
|
"idx-document-1">An embedded document</a></span> is entirely independent of the
|
|
document in which it is embedded. For instance, relative URIs within the
|
|
embedded document <a href="links.html#resolving-relative-uris">resolve</a>
|
|
according to the base URI of the embedded document, not that of the main
|
|
document. An embedded document is only rendered within another document (e.g.,
|
|
in a subwindow); it remains otherwise independent.</p>
|
|
|
|
<div class="example">
|
|
<p>For instance, the following line embeds the contents of <tt>
|
|
embed_me.html</tt> at the location where the <a href="objects.html#edef-OBJECT"
|
|
class="noxref"><samp class="einst">OBJECT</samp></a> definition occurs.</p>
|
|
|
|
<pre>
|
|
<em>...text before...</em>
|
|
<OBJECT data="embed_me.html">
|
|
Warning: embed_me.html could not be embedded.
|
|
</OBJECT>
|
|
<em>...text after...</em>
|
|
</pre>
|
|
|
|
<p>Recall that the contents of <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a> must only be rendered if the
|
|
file specified by the <a href="objects.html#adef-data" class="noxref"><samp
|
|
class="ainst">data</samp></a> attribute cannot be loaded.</p>
|
|
</div>
|
|
|
|
<p>The behavior of a user agent in cases where a file includes itself is not
|
|
defined.</p>
|
|
|
|
<h2><a name="h-13.6">13.6</a> <span class="index-def" title="image map"><a
|
|
name="include-maps">Image maps</a></span></h2>
|
|
|
|
Image maps allow authors to specify regions of an image or object and assign a
|
|
specific 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.
|
|
|
|
<p>An image map is created by associating an object with a specification of
|
|
sensitive geometric areas on the object.</p>
|
|
|
|
<p>There are two types of image maps:</p>
|
|
|
|
<ul>
|
|
<li><span class="index-def" title="client-side image map|image
|
|
map::client-side"><a name="didx-client-side_image_map"><dfn><em>
|
|
Client-side.</em></dfn></a></span> 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.</li>
|
|
|
|
<li><span class="index-def" title="server-side image map|image
|
|
map::server-side"><a name="didx-server-side_image_map"><dfn><em>
|
|
Server-side.</em></dfn></a></span> 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 <a href="links.html#adef-href" class=
|
|
"noxref"><samp class="ainst">href</samp></a> attribute of the <a href=
|
|
"links.html#edef-A" class="noxref"><samp class="einst">A</samp></a> element.
|
|
The server-side agent interprets the coordinates and performs some action.</li>
|
|
</ul>
|
|
|
|
<p><span class="index-inst" title="accessibility::of image maps"><a name=
|
|
"idx-accessibility-2">Client-side image maps are preferred</a></span> over
|
|
server-side image maps for at least two reasons: they are accessible to people
|
|
browsing with non-graphical user agents and they offer immediate feedback as to
|
|
whether or not the pointer is over an active region.</p>
|
|
|
|
<h3><a name="h-13.6.1">13.6.1</a> <a name="client-side-maps">Client-side image
|
|
maps:</a> the <a name="edef-MAP"><samp class="edef">MAP</samp></a> and <a name=
|
|
"edef-AREA"><samp class="edef">AREA</samp></a> elements</h3>
|
|
|
|
<div class="dtd-fragment">
|
|
<pre class="dtd-fragment">
|
|
<!ELEMENT <a href="objects.html#edef-MAP" class="noxref"><samp class=
|
|
"einst">MAP</samp></a> - - ((<a href=
|
|
"../sgml/dtd.html#block">%block;</a>) | AREA)+ -- client-side image map -->
|
|
<!ATTLIST MAP
|
|
<a href=
|
|
"../sgml/dtd.html#attrs">%attrs;</a> -- <a href=
|
|
"../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href=
|
|
"../sgml/dtd.html#i18n">%i18n</a>, <a href=
|
|
"../sgml/dtd.html#events">%events</a> --
|
|
<a href="objects.html#adef-name-MAP" class="noxref"><samp class=
|
|
"ainst-MAP">name</samp></a> <a href=
|
|
"../types.html#type-cdata">CDATA</a> #REQUIRED -- for reference by usemap --
|
|
>
|
|
</pre>
|
|
</div>
|
|
|
|
<p><em>Start tag: <strong>required</strong>, End tag: <strong>
|
|
required</strong></em></p>
|
|
|
|
<div class="dtd-fragment">
|
|
<pre class="dtd-fragment">
|
|
<!ELEMENT <a href="objects.html#edef-AREA" class="noxref"><samp class=
|
|
"einst">AREA</samp></a> - O EMPTY -- client-side image map area -->
|
|
<!ATTLIST AREA
|
|
<a href=
|
|
"../sgml/dtd.html#attrs">%attrs;</a> -- <a href=
|
|
"../sgml/dtd.html#coreattrs">%coreattrs</a>, <a href=
|
|
"../sgml/dtd.html#i18n">%i18n</a>, <a href=
|
|
"../sgml/dtd.html#events">%events</a> --
|
|
<a href="objects.html#adef-shape" class="noxref"><samp class=
|
|
"ainst-AREA">shape</samp></a> <a href=
|
|
"../sgml/dtd.html#Shape">%Shape;</a> rect -- controls interpretation of coords --
|
|
<a href="objects.html#adef-coords" class="noxref"><samp class=
|
|
"ainst-AREA">coords</samp></a> <a href=
|
|
"../sgml/dtd.html#Coords">%Coords;</a> #IMPLIED -- comma-separated list of lengths --
|
|
<a href="links.html#adef-href" class="noxref"><samp class=
|
|
"ainst-AREA">href</samp></a> <a href=
|
|
"../sgml/dtd.html#URI">%URI;</a> #IMPLIED -- URI for linked resource --
|
|
<a href="objects.html#adef-nohref" class="noxref"><samp class=
|
|
"ainst-AREA">nohref</samp></a> (nohref) #IMPLIED -- this region has no action --
|
|
<a href="objects.html#adef-alt" class="noxref"><samp class=
|
|
"ainst-AREA">alt</samp></a> <a href=
|
|
"../sgml/dtd.html#Text">%Text;</a> #REQUIRED -- short description --
|
|
<a href="../interact/forms.html#adef-tabindex" class="noxref"><samp class=
|
|
"ainst-AREA">tabindex</samp></a> <a href=
|
|
"../types.html#type-number">NUMBER</a> #IMPLIED -- position in tabbing order --
|
|
<a href="../interact/forms.html#adef-accesskey" class="noxref"><samp class=
|
|
"ainst-AREA">accesskey</samp></a> <a href=
|
|
"../sgml/dtd.html#Character">%Character;</a> #IMPLIED -- accessibility key character --
|
|
<a href="../interact/scripts.html#adef-onfocus" class="noxref"><samp class=
|
|
"ainst-AREA">onfocus</samp></a> <a href=
|
|
"../sgml/dtd.html#Script">%Script;</a> #IMPLIED -- the element got the focus --
|
|
<a href="../interact/scripts.html#adef-onblur" class="noxref"><samp class=
|
|
"ainst-AREA">onblur</samp></a> <a href=
|
|
"../sgml/dtd.html#Script">%Script;</a> #IMPLIED -- the element lost the focus --
|
|
>
|
|
</pre>
|
|
</div>
|
|
|
|
<p><em>Start tag: <strong>required</strong>, End tag: <strong>
|
|
forbidden</strong></em></p>
|
|
|
|
<div class="adef-list">
|
|
<p><em>MAP attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-name-MAP"><samp class="adef">name</samp></a> = <a href=
|
|
"../types.html#type-cdata"><em>cdata</em></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>This attribute assigns a name to the image map defined by a <a href=
|
|
"objects.html#edef-MAP" class="noxref"><samp class="einst">MAP</samp></a>
|
|
element.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="adef-list">
|
|
<p><em>AREA attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-shape"><samp class="adef">shape</samp></a> = <samp>
|
|
default|rect|circle|poly</samp> <a href="../types.html#case-insensitive">
|
|
[CI]</a></dt>
|
|
|
|
<dd>This attribute specifies the shape of a region. Possible values:
|
|
|
|
<ul>
|
|
<li><samp>default:</samp> Specifies the entire region.</li>
|
|
|
|
<li><samp>rect:</samp> Define a rectangular region.</li>
|
|
|
|
<li><samp>circle:</samp> Define a circular region.</li>
|
|
|
|
<li><samp>poly:</samp> Define a polygonal region.</li>
|
|
</ul>
|
|
</dd>
|
|
|
|
<dt><a name="adef-coords"><samp class="adef">coords</samp></a> = <em>
|
|
coordinates</em> <a href="../types.html#case-neutral">[CN]</a></dt>
|
|
|
|
<dd>This attribute specifies the position and shape on the screen. The number
|
|
and order of values depends on the shape being defined. Possible combinations:
|
|
|
|
<ul>
|
|
<li><samp>rect:</samp> left-x, top-y, right-x, bottom-y.</li>
|
|
|
|
<li><samp>circle:</samp> center-x, center-y, radius. <strong>Note.</strong>
|
|
When the radius value is a percentage value, user agents should calculate the
|
|
final radius value based on the associated object's width and height. The
|
|
radius should be the smaller value of the two.</li>
|
|
|
|
<li><samp>poly:</samp> x1, y1, x2, y2, ..., xN, yN. The first x and y
|
|
coordinate pair and the last should be the same to close the polygon. When
|
|
these coordinate values are not the same, user agents should infer an
|
|
additional coordinate pair to close the polygon.</li>
|
|
</ul>
|
|
|
|
<p>Coordinates are relative to the top, left corner of the object. All values
|
|
are <a href="../types.html#type-length">lengths</a>. All values are separated
|
|
by commas.</p>
|
|
</dd>
|
|
|
|
<dt><a name="adef-nohref"><samp class="adef">nohref</samp></a> <a href=
|
|
"../types.html#case-insensitive">[CI]</a></dt>
|
|
|
|
<dd>When set, this boolean attribute specifies that a region has no associated
|
|
link.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute to associate an image map with an element</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-usemap"><samp class="adef">usemap</samp></a> = <a href=
|
|
"../types.html#type-uri"><em>uri</em></a> <a href=
|
|
"../types.html#see-type-for-case">[CT]</a></dt>
|
|
|
|
<dd>This attribute associates an image map with an element. The image map is
|
|
defined by a <a href="objects.html#edef-MAP" class="noxref"><samp class=
|
|
"einst">MAP</samp></a> element. The value of <samp>usemap</samp> must match the
|
|
value of the <a href="objects.html#adef-name-MAP" class="noxref"><samp class=
|
|
"ainst-MAP">name</samp></a> attribute of the associated <a href=
|
|
"objects.html#edef-MAP" class="noxref"><samp class="einst">MAP</samp></a>
|
|
element.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="aref-list">
|
|
<p><em>Attributes defined elsewhere</em></p>
|
|
|
|
<ul>
|
|
<li><a href="global.html#adef-id" class="noxref"><samp class="ainst">
|
|
id</samp></a>, <a href="global.html#adef-class" class="noxref"><samp class=
|
|
"ainst">class</samp></a> (<a href=
|
|
"../struct/global.html#id-and-class">document-wide identifiers</a>)</li>
|
|
|
|
<li><a href="dirlang.html#adef-lang" class="noxref"><samp class="ainst">
|
|
lang</samp></a> (<a href="../struct/dirlang.html#language-info">language
|
|
information</a>), <a href="dirlang.html#adef-dir" class="noxref"><samp class=
|
|
"ainst">dir</samp></a> (<a href="../struct/dirlang.html#bidirection">text
|
|
direction</a>)</li>
|
|
|
|
<li><a href="global.html#adef-title" class="noxref"><samp class="ainst">
|
|
title</samp></a> (<a href="../struct/global.html#title">element title</a>)</li>
|
|
|
|
<li><a href="../present/styles.html#adef-style" class="noxref"><samp class=
|
|
"ainst">style</samp></a> (<a href="../present/styles.html#style-element">inline
|
|
style information</a>)</li>
|
|
|
|
<li><a href="../interact/forms.html#adef-name-INPUT" class="noxref"><samp
|
|
class="ainst-INPUT">name</samp></a> (<a href=
|
|
"../interact/forms.html#submit-format">submitting objects with forms</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-alt" class="noxref"><samp class="ainst">
|
|
alt</samp></a> (<a href="#alternate-text">alternate text</a>)</li>
|
|
|
|
<li><a href="links.html#adef-href" class="noxref"><samp class="ainst">
|
|
href</samp></a> (<a href="links.html#edef-A">anchor reference</a>) <a href=
|
|
"../present/frames.html#adef-target" class="noxref"><samp class="ainst">
|
|
target</samp></a> (<a href="../present/frames.html#target-info">frame target
|
|
information</a>)</li>
|
|
|
|
<li><a href="../interact/forms.html#adef-tabindex" class="noxref"><samp class=
|
|
"ainst">tabindex</samp></a> (<a href=
|
|
"../interact/forms.html#tabbing-navigation">tabbing navigation</a>)</li>
|
|
|
|
<li><a href="../interact/forms.html#adef-accesskey" class="noxref"><samp class=
|
|
"ainst">accesskey</samp></a> (<a href=
|
|
"../interact/forms.html#access-keys">access keys</a>)</li>
|
|
|
|
<li><a href="objects.html#adef-shape" class="noxref"><samp class="ainst">
|
|
shape</samp></a> (<a href="#include-maps">image maps</a>)</li>
|
|
|
|
<li><a href="../interact/scripts.html#adef-onclick" class="noxref"><samp class=
|
|
"ainst">onclick</samp></a>, <a href="../interact/scripts.html#adef-ondblclick"
|
|
class="noxref"><samp class="ainst">ondblclick</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmousedown" class="noxref"><samp class="ainst">
|
|
onmousedown</samp></a>, <a href="../interact/scripts.html#adef-onmouseup"
|
|
class="noxref"><samp class="ainst">onmouseup</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmouseover" class="noxref"><samp class="ainst">
|
|
onmouseover</samp></a>, <a href="../interact/scripts.html#adef-onmousemove"
|
|
class="noxref"><samp class="ainst">onmousemove</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onmouseout" class="noxref"><samp class="ainst">
|
|
onmouseout</samp></a>, <a href="../interact/scripts.html#adef-onkeypress"
|
|
class="noxref"><samp class="ainst">onkeypress</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onkeydown" class="noxref"><samp class="ainst">
|
|
onkeydown</samp></a>, <a href="../interact/scripts.html#adef-onkeyup" class=
|
|
"noxref"><samp class="ainst">onkeyup</samp></a>, <a href=
|
|
"../interact/scripts.html#adef-onfocus" class="noxref"><samp class="ainst">
|
|
onfocus</samp></a>, <a href="../interact/scripts.html#adef-onblur" class=
|
|
"noxref"><samp class="ainst">onblur</samp></a> (<a href=
|
|
"../interact/scripts.html#events">intrinsic events</a>)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p>The <a href="objects.html#edef-MAP" class="noxref"><samp class="einst">
|
|
MAP</samp></a> element specifies a client-side image map (or other navigation
|
|
mechanism) that may be associated with another elements (<a href=
|
|
"objects.html#edef-IMG" class="noxref"><samp class="einst">IMG</samp></a>, <a
|
|
href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a>, or <a href="../interact/forms.html#edef-INPUT" class=
|
|
"noxref"><samp class="einst">INPUT</samp></a>). An image map is associated with
|
|
an element via the element's <a href="objects.html#adef-usemap" class="noxref">
|
|
<samp class="ainst">usemap</samp></a> attribute. The <a href=
|
|
"objects.html#edef-MAP" class="noxref"><samp class="einst">MAP</samp></a>
|
|
element may be used without an associated image for general navigation
|
|
mechanisms.</p>
|
|
|
|
<p>The presence of the <a href="objects.html#adef-usemap" class="noxref"><samp
|
|
class="ainst">usemap</samp></a> attribute for an <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
implies that the object being included is an image. <span class="index-inst"
|
|
title="image map::with OBJECT|user agent::handling image maps"><a name=
|
|
"idx-image_map-3">Furthermore</a></span>, when the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element has an associated client-side image map, user agents may implement user
|
|
interaction with the <a href="objects.html#edef-OBJECT" class="noxref"><samp
|
|
class="einst">OBJECT</samp></a> solely in terms of the client-side image map.
|
|
This allows user agents (such as an audio browser or robot) to interact with
|
|
the <a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> without having to process it; the user agent may even elect
|
|
not to retrieve (or process) the object. When an <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
has an associated image map, authors should not expect that the object will be
|
|
retrieved or processed by every user agent.</p>
|
|
|
|
<p><span class="index-inst" title="client-side image map::creation of">The <a
|
|
name="idx-client-side_image_map-1" href="objects.html#edef-MAP" class="noxref">
|
|
<samp class="einst">MAP</samp></a> element content model allows authors to
|
|
combine the following:</span></p>
|
|
|
|
<ol>
|
|
<li>One or more <a href="objects.html#edef-AREA" class="noxref"><samp class=
|
|
"einst">AREA</samp></a> elements. These elements have no content but specify
|
|
the geometric regions of the image map and the link associated with each
|
|
region. Note that user agents do not generally render <a href=
|
|
"objects.html#edef-AREA" class="noxref"><samp class="einst">AREA</samp></a>
|
|
elements. Therefore, authors must provide alternate text for each <a href=
|
|
"objects.html#edef-AREA" class="noxref"><samp class="einst">AREA</samp></a>
|
|
with the <a href="objects.html#adef-alt" class="noxref"><samp class="ainst">
|
|
alt</samp></a> attribute (see below for information on <a href=
|
|
"#alternate-text">how to specify alternate text</a>).</li>
|
|
|
|
<li>Block-level content. This content should include <a href=
|
|
"links.html#edef-A" class="noxref"><samp class="einst">A</samp></a> elements
|
|
that specify the geometric regions of the image map and the link associated
|
|
with each region. Note that the user agent should render block-level content of
|
|
a <a href="objects.html#edef-MAP" class="noxref"><samp class="einst">
|
|
MAP</samp></a> element. Authors should use this method to create more
|
|
accessible documents.</li>
|
|
</ol>
|
|
|
|
<p>When a <a href="objects.html#edef-MAP" class="noxref"><samp class="einst">
|
|
MAP</samp></a> element contains mixed content (both <a href=
|
|
"objects.html#edef-AREA" class="noxref"><samp class="einst">AREA</samp></a>
|
|
elements and block-level content), user agents must ignore the <a href=
|
|
"objects.html#edef-AREA" class="noxref"><samp class="einst">AREA</samp></a>
|
|
elements.</p>
|
|
|
|
<p>Authors should specify an image maps's geometry completely with <a href=
|
|
"objects.html#edef-AREA" class="noxref"><samp class="einst">AREA</samp></a>
|
|
elements, or completely with <a href="links.html#edef-A" class="noxref"><samp
|
|
class="einst">A</samp></a> elements, or completely with both if content is
|
|
mixed. Authors may wish to mix content so that older user agents will handle
|
|
map geometries specified by <a href="objects.html#edef-AREA" class="noxref">
|
|
<samp class="einst">AREA</samp></a> elements and new user agents will take
|
|
advantage of richer block content.</p>
|
|
|
|
<p><span class="index-inst" title="image map::overlapping regions of"><a name=
|
|
"idx-image_map-4">If two or more defined regions overlap,</a></span> the
|
|
region-defining element that appears earliest in the document takes precedence
|
|
(i.e., responds to user input).</p>
|
|
|
|
<p><span class="index-inst" title="accessibility::of image maps|image
|
|
map::accessibility of"><a name="idx-accessibility-3">User agents and authors
|
|
should offer textual alternates</a></span> to graphical image maps for cases
|
|
when graphics are not available or the user cannot access them. For example,
|
|
user agents may use <a href="objects.html#adef-alt" class="noxref"><samp class=
|
|
"ainst">alt</samp></a> text to create textual links in place of a graphical
|
|
image map. Such links may be activated in a variety of ways (keyboard, voice
|
|
activation, etc.).</p>
|
|
|
|
<div class="note">
|
|
<p><em><strong>Note.</strong> <a href="objects.html#edef-MAP" class="noxref">
|
|
<samp class="einst">MAP</samp></a> is not backwards compatible with HTML 2.0
|
|
user agents.</em></p>
|
|
</div>
|
|
|
|
<h4>Client-side image map examples<a name="h-13.6.1.1"> </a></h4>
|
|
|
|
<div class="example">
|
|
<p>In the following example, we create a client-side image map for the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element. We do not want to render the image map's contents when the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
is rendered, so we "hide" the <a href="objects.html#edef-MAP" class="noxref">
|
|
<samp class="einst">MAP</samp></a> element within the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element's content. Consequently, the <a href="objects.html#edef-MAP" class=
|
|
"noxref"><samp class="einst">MAP</samp></a> element's contents will only be
|
|
rendered if the <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> cannot be rendered.</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
|
|
<p>We may want to render the image map's contents even when a user agent can
|
|
render the <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a>. For instance, we may want to associate an image map
|
|
with an <a href="objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a> element <em>and</em> include a text navigation bar at the
|
|
bottom of the page. To do so, we define the <a href="objects.html#edef-MAP"
|
|
class="noxref"><samp class="einst">MAP</samp></a> element outside the <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">
|
|
OBJECT</samp></a>:</p>
|
|
|
|
<pre>
|
|
<HTML>
|
|
<HEAD>
|
|
<TITLE>The cool site!</TITLE>
|
|
</HEAD>
|
|
<BODY>
|
|
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
|
|
</OBJECT>
|
|
|
|
<em>...the rest of the page here...</em>
|
|
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>In the following example, we create a similar image map, this time using the
|
|
<a href="objects.html#edef-AREA" class="noxref"><samp class="einst">
|
|
AREA</samp></a> element. Note the use of <a href="objects.html#adef-alt" class=
|
|
"noxref"><samp class="ainst">alt</samp></a> text:</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
|
|
<p>Here is a similar version using the <a href="objects.html#edef-IMG" class=
|
|
"noxref"><samp class="einst">IMG</samp></a> element instead of <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
(with the same <a href="objects.html#edef-MAP" class="noxref"><samp class=
|
|
"einst">MAP</samp></a> declaration):</p>
|
|
|
|
<pre>
|
|
<P><IMG src="navbar1.gif" usemap="#map1" alt="navigation bar">
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following example illustrates how image maps may be shared.</p>
|
|
|
|
<p>Nested <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> elements are useful for providing fallbacks in case a
|
|
user agent doesn't support certain formats. For example:</p>
|
|
|
|
<pre>
|
|
<P>
|
|
<OBJECT data="navbar.png" type="image/png">
|
|
<OBJECT data="navbar.gif" type="image/gif">
|
|
<em>text describing the image...</em>
|
|
</OBJECT>
|
|
</OBJECT>
|
|
</pre>
|
|
|
|
<p>If the user agent doesn't support the PNG format, it tries to render the GIF
|
|
image. If it doesn't support GIF (e.g., it's a speech-based user agent), it
|
|
defaults to the text description provided as the content of the inner <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
element. When <a href="objects.html#edef-OBJECT" class="noxref"><samp class=
|
|
"einst">OBJECT</samp></a> elements are nested this way, authors may share image
|
|
maps among them:</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>The following example illustrates how anchors may be specified to create
|
|
inactive zones within an image map. The first anchor specifies a small circular
|
|
region with no associated link. The second anchor specifies a larger circular
|
|
region with the same center coordinates. Combined, the two 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.</p>
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Similarly, the <a href="objects.html#adef-nohref" class="noxref"><samp
|
|
class="ainst-AREA">nohref</samp></a> attribute for the <a href=
|
|
"objects.html#edef-AREA" class="noxref"><samp class="einst">AREA</samp></a>
|
|
element declares that geometric region has no associated link.</p>
|
|
|
|
<h3><a name="h-13.6.2">13.6.2</a> <span class="index-inst" title="image
|
|
map::server side|server-side image map"><a name="idx-image_map-6">Server-side
|
|
image maps</a></span></h3>
|
|
|
|
<p><a name="server-side">Server-side image maps</a> may be interesting in cases
|
|
where the image map is too complicated for a client-side image map.</p>
|
|
|
|
<p>It is only possible to define a server-side image map for the <a href=
|
|
"objects.html#edef-IMG" class="noxref"><samp class="einst">IMG</samp></a> and
|
|
<a href="../interact/forms.html#edef-INPUT" class="noxref"><samp class="einst">
|
|
INPUT</samp></a> elements. In the case of <a href="objects.html#edef-IMG"
|
|
class="noxref"><samp class="einst">IMG</samp></a>, the <a href=
|
|
"objects.html#edef-IMG" class="noxref"><samp class="einst">IMG</samp></a> must
|
|
be inside an <a href="links.html#edef-A" class="noxref"><samp class="einst">
|
|
A</samp></a> element and the boolean attribute <a name="adef-ismap"><samp
|
|
class="adef">ismap</samp></a> (<a href=
|
|
"../types.html#case-insensitive">[CI]</a>) must be set. In the case of <a href=
|
|
"../interact/forms.html#edef-INPUT" class="noxref"><samp class="einst">
|
|
INPUT</samp></a>, the <a href="../interact/forms.html#edef-INPUT" class=
|
|
"noxref"><samp class="einst">INPUT</samp></a> must be of type "image".</p>
|
|
|
|
<p>When the user activates the link by clicking on the image, the screen
|
|
coordinates are sent directly to the server where the document resides. Screen
|
|
coordinates are expressed as screen pixel values relative to the image. For
|
|
normative information about the definition of a pixel and how to scale it,
|
|
please consult <a rel="biblioentry" href="../references.html#ref-CSS1" class=
|
|
"normref">[CSS1]</a>.</p>
|
|
|
|
<div class="example">
|
|
<p>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.</p>
|
|
|
|
<pre>
|
|
<P><A href="http://www.acme.com/cgi-bin/competition">
|
|
<IMG src="game.gif" ismap alt="target"></A>
|
|
</pre>
|
|
</div>
|
|
|
|
<p><span class="index-inst" title="coordinates::of server-side image map| image
|
|
map|server-side image map::click coordinates"><a name="idx-coordinates">The
|
|
location clicked</a></span> is passed to the server as follows. The user agent
|
|
derives a new URI from the URI specified by the <a href="links.html#adef-href"
|
|
class="noxref"><samp class="ainst">href</samp></a> attribute of the <a href=
|
|
"links.html#edef-A" class="noxref"><samp class="einst">A</samp></a> element, by
|
|
appending `?' followed by the x and y coordinates, separated by a comma. The
|
|
link is then followed using the new URI. 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".</p>
|
|
|
|
<p>User agents that do not offer the user a means to select specific
|
|
coordinates (e.g., non-graphical user agents that rely on keyboard input,
|
|
speech-based user agents, etc.) should send the coordinates "0,0" to the server
|
|
when the link is activated.</p>
|
|
|
|
<h2><a name="h-13.7">13.7</a> <span class="index-inst" title="image::visual
|
|
rendering of|object::visual rendering of"><a name="visual">Visual presentation
|
|
of images, objects, and applets</a></span></h2>
|
|
|
|
<em>All <a href="objects.html#edef-IMG" class="noxref"><samp class="einst">
|
|
IMG</samp></a> and <a href="objects.html#edef-OBJECT" class="noxref"><samp
|
|
class="einst">OBJECT</samp></a> attributes that concern visual alignment and
|
|
presentation have been <a href="../conform.html#deprecated">deprecated</a> in
|
|
favor of style sheets.</em>
|
|
|
|
<h3><a name="h-13.7.1">13.7.1</a> <span class="index-inst" title="image::width
|
|
and height of|object::width and height of"><a name="img-wh">Width and
|
|
height</a></span></h3>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-width-IMG"><samp class="adef">width</samp></a> = <a href=
|
|
"../types.html#type-length"><em>length</em></a> <a href=
|
|
"../types.html#case-neutral">[CN]</a></dt>
|
|
|
|
<dd>Image and object width override.</dd>
|
|
|
|
<dt><a name="adef-height-IMG"><samp class="adef">height</samp></a> = <a href=
|
|
"../types.html#type-length"><em>length</em></a> <a href=
|
|
"../types.html#case-neutral">[CN]</a></dt>
|
|
|
|
<dd>Image and object height override.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<p>When specified, the <a href="objects.html#adef-width-IMG" class="noxref">
|
|
<samp class="ainst-IMG">width</samp></a> and <a href=
|
|
"objects.html#adef-height-IMG" class="noxref"><samp class="ainst-IMG">
|
|
height</samp></a> attributes tell user agents to override the natural image or
|
|
object size in favor of these values.</p>
|
|
|
|
<p>When the object is an image, it is scaled. User agents should do their best
|
|
to scale an object or image to match the width and height specified by the
|
|
author. Note that lengths expressed as percentages are based on the horizontal
|
|
or vertical space currently available, not on the natural size of the image,
|
|
object, or applet.</p>
|
|
|
|
<p>The <a href="objects.html#adef-height-IMG" class="noxref"><samp class=
|
|
"ainst-IMG">height</samp></a> and <a href="objects.html#adef-width-IMG" class=
|
|
"noxref"><samp class="ainst-IMG">width</samp></a> 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.</p>
|
|
|
|
<h3><a name="h-13.7.2">13.7.2</a> <span class="index-inst" title="white
|
|
space::around images and objects|image::white space around|object::white space
|
|
around"><a name="idx-white_space">White space around images and
|
|
objects</a></span></h3>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-hspace"><samp class="adef">hspace</samp></a> = <a href=
|
|
"../types.html#type-pixels"><em>pixels</em></a> <a href=
|
|
"../types.html#case-neutral">[CN]</a></dt>
|
|
|
|
<dd><a href="../conform.html#deprecated"><strong>Deprecated.</strong></a> This
|
|
attribute specifies the amount of white space to be inserted to the left and
|
|
right of an <a href="objects.html#edef-IMG" class="noxref"><samp class="einst">
|
|
IMG</samp></a>, <a href="objects.html#edef-APPLET" class="noxref"><samp class=
|
|
"einst">APPLET</samp></a>, or <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a>. The default value is not
|
|
specified, but is generally a small, non-zero length.</dd>
|
|
|
|
<dt><a name="adef-vspace"><samp class="adef">vspace</samp></a> = <a href=
|
|
"../types.html#type-pixels"><em>pixels</em></a> <a href=
|
|
"../types.html#case-neutral">[CN]</a></dt>
|
|
|
|
<dd><a href="../conform.html#deprecated"><strong>Deprecated.</strong></a> This
|
|
attribute specifies the amount of white space to be inserted above and below an
|
|
<a href="objects.html#edef-IMG" class="noxref"><samp class="einst">
|
|
IMG</samp></a>, <a href="objects.html#edef-APPLET" class="noxref"><samp class=
|
|
"einst">APPLET</samp></a>, or <a href="objects.html#edef-OBJECT" class=
|
|
"noxref"><samp class="einst">OBJECT</samp></a>. The default value is not
|
|
specified, but is generally a small, non-zero length.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<h3><a name="h-13.7.3">13.7.3</a> <span class="index-inst" title=
|
|
"border::around image|border::around object|image::border around|object::border
|
|
around"><a name="idx-border">Borders</a></span></h3>
|
|
|
|
<p>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 href=
|
|
"links.html#edef-A" class="noxref"><samp class="einst">A</samp></a>
|
|
element).</p>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-border-IMG"><samp class="adef">border</samp></a> = <a href=
|
|
"../types.html#type-pixels"><em>pixels</em></a> <a href=
|
|
"../types.html#case-neutral">[CN]</a></dt>
|
|
|
|
<dd><a href="../conform.html#deprecated"><strong>Deprecated.</strong></a> This
|
|
attribute specifies the width of an <a href="objects.html#edef-IMG" class=
|
|
"noxref"><samp class="einst">IMG</samp></a> or <a href=
|
|
"objects.html#edef-OBJECT" class="noxref"><samp class="einst">OBJECT</samp></a>
|
|
border, in pixels. The default value for this attribute depends on the user
|
|
agent.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<h3><a name="h-13.7.4">13.7.4</a> <span class="index-inst" title="alignment::of
|
|
images|alignment::of objects|object::alignment of|image::alignment of"><a name=
|
|
"alignment">Alignment</a></span></h3>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-align-IMG"><samp class="adef">align</samp></a> = <samp>
|
|
bottom|middle|top|left|right</samp></dt>
|
|
|
|
<dd><a href="../conform.html#deprecated"><strong>Deprecated.</strong></a> This
|
|
attribute specifies the position of an <a href="objects.html#edef-IMG" class=
|
|
"noxref"><samp class="einst">IMG</samp></a>, <a href="objects.html#edef-OBJECT"
|
|
class="noxref"><samp class="einst">OBJECT</samp></a>, or <a href=
|
|
"objects.html#edef-APPLET" class="noxref"><samp class="einst">APPLET</samp></a>
|
|
with respect to its context.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<p>The following values for <a href="objects.html#adef-align-IMG" class=
|
|
"noxref"><samp class="ainst-IMG">align</samp></a> concern the object's position
|
|
with respect to surrounding text:</p>
|
|
|
|
<ul>
|
|
<li><samp>bottom:</samp> means that the bottom of the object should be
|
|
vertically aligned with the current baseline. This is the default value.</li>
|
|
|
|
<li><samp>middle:</samp> means that the center of the object should be
|
|
vertically aligned with the current baseline.</li>
|
|
|
|
<li><samp>top:</samp> means that the top of the object should be vertically
|
|
aligned with the top of the current text line.</li>
|
|
</ul>
|
|
|
|
<p>Two other values, <samp>left</samp> and <samp>right</samp>, cause the image
|
|
to float to the current left or right margin. They are discussed in the section
|
|
on <a href="../present/graphics.html#floating">floating objects</a>.</p>
|
|
|
|
<div class="note">
|
|
<p><em><strong>Differing interpretations of align.</strong> User agents vary in
|
|
their interpretation of the <a href="objects.html#adef-align-IMG" class=
|
|
"noxref"><samp class="ainst-IMG">align</samp></a> attribute. Some only take
|
|
into account what has occurred on the text line prior to the element, some take
|
|
into account the text on both sides of the element.</em></p>
|
|
</div>
|
|
|
|
<h2><a name="h-13.8">13.8</a> <span class="index-inst" title="alternate
|
|
text::specifying|accessibility::alternate text"><a name="alternate-text">How to
|
|
specify alternate text</a></span></h2>
|
|
|
|
<div class="adef-list">
|
|
<p><em>Attribute definitions</em></p>
|
|
|
|
<dl>
|
|
<dt><a name="adef-alt"><samp class="adef">alt</samp></a> = <a href=
|
|
"../types.html#type-text"><em>text</em></a> <a href=
|
|
"../types.html#case-sensitive">[CS]</a></dt>
|
|
|
|
<dd>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 <a href="dirlang.html#adef-lang" class="noxref"><samp class=
|
|
"ainst">lang</samp></a> attribute.</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<p>Several non-textual elements (<a href="objects.html#edef-IMG" class=
|
|
"noxref"><samp class="einst">IMG</samp></a>, <a href="objects.html#edef-AREA"
|
|
class="noxref"><samp class="einst">AREA</samp></a>, <a href=
|
|
"objects.html#edef-APPLET" class="noxref"><samp class="einst">
|
|
APPLET</samp></a>, and <a href="../interact/forms.html#edef-INPUT" class=
|
|
"noxref"><samp class="einst">INPUT</samp></a>) let authors specify alternate
|
|
text 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 who
|
|
use speech synthesizers, those who have configured their graphical user agents
|
|
not to display images, etc.</p>
|
|
|
|
<p>The <a href="objects.html#adef-alt" class="noxref"><samp class="ainst">
|
|
alt</samp></a> attribute must be specified for the <a href=
|
|
"objects.html#edef-IMG" class="noxref"><samp class="einst">IMG</samp></a> and
|
|
<a href="objects.html#edef-AREA" class="noxref"><samp class="einst">
|
|
AREA</samp></a> elements. It is optional for the <a href=
|
|
"../interact/forms.html#edef-INPUT" class="noxref"><samp class="einst">
|
|
INPUT</samp></a> and <a href="objects.html#edef-APPLET" class="noxref"><samp
|
|
class="einst">APPLET</samp></a> elements.</p>
|
|
|
|
<p>While alternate text may be very helpful, it must be handled with care.
|
|
Authors should observe the following guidelines:</p>
|
|
|
|
<ul>
|
|
<li>Do not specify irrelevant alternate text when including images intended to
|
|
<em>format</em> a page, for instance, <samp>alt="red ball"</samp> would be
|
|
inappropriate for an image that adds a red ball for decorating a heading or
|
|
paragraph. In such cases, the alternate text should be the empty string ("").
|
|
Authors are in any case advised to avoid using images to format pages; style
|
|
sheets should be used instead.</li>
|
|
|
|
<li>Do not specify meaningless alternate text (e.g., "dummy text"). Not only
|
|
will this frustrate users, it will slow down user agents that must convert text
|
|
to speech or braille output.</li>
|
|
</ul>
|
|
|
|
<p>Implementors should consult the section on <a href=
|
|
"../appendix/notes.html#accessibility">accessibility</a> for information about
|
|
how to handle cases of omitted alternate text.</p>
|
|
|
|
<div class="navbar" align="center">
|
|
<hr><a href="links.html">previous</a> <a href="../present/styles.html">
|
|
next</a> <a href="../cover.html#minitoc">contents</a> <a href=
|
|
"../index/elements.html">elements</a> <a href=
|
|
"../index/attributes.html">attributes</a> <a href="../index/list.html">
|
|
index</a></div>
|
|
</body>
|
|
</html>
|
|
|