1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang=en-us>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>OBJECT - Embedded Object</title>
<link rev=Made href="mailto:liam@htmlhelp.com">
<link rel=Start href="../index.html">
<link rel=StyleSheet href="../style.css" type="text/css">
<link rel=StyleSheet href="../aural.css" type="text/css" media=aural>
<link rel="Alternate StyleSheet" href="../strictHTMLonly.css" type="text/css" title="Strict HTML only">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="Liam Quinn">
<meta name="description" content="A description of HTML 4.0's OBJECT element for embedded objects such as images, videos, Java applets, and VRML worlds.">
<meta name="keywords" content="object element, insert, generic inclusion, embed, embedded object, inline, inlined, image, images, java applets, Java, movies, videos, video, movie, sound, audio file, embedding, HyperText Markup Language, HTML, HTML4, HTML 4.0, Web Design Group, WDG, <object> tag">
<script type="text/javascript" src="../hideNonStrict.js"></script>
</head>
<body>
<h2><img src="../wdglogo1.gif" width=250 height=83 alt="The Web Design Group"></h2>
<h1>OBJECT - Embedded Object</h1>
<script type="text/javascript">
<!--
if (document.styleSheets && writeButton) {
writeButton("attributes");
}
// -->
</script>
<table>
<tr valign=top>
<th>Syntax</th>
<td><strong class=required><OBJECT></strong>...<strong class=required></OBJECT></strong></td>
</tr>
<tr valign=top>
<th>Attribute Specifications</th>
<td>
<ul>
<li>DATA=<var><a href="../values.html#uri">URI</a></var> (object data)</li>
<li>CLASSID=<var><a href="../values.html#uri">URI</a></var> (location of implementation)</li>
<li>ARCHIVE=<var><a href="../values.html#cdata">CDATA</a></var> (archive files)</li>
<li>CODEBASE=<var><a href="../values.html#uri">URI</a></var> (base <abbr class=initialism title="Uniform Resource Indicator">URI</abbr> for CLASSID, DATA, ARCHIVE)</li>
<li>WIDTH=<var><a href="../values.html#length">Length</a></var> (object width)</li>
<li>HEIGHT=<var><a href="../values.html#length">Length</a></var> (object height)</li>
<li>NAME=<var><a href="../values.html#cdata">CDATA</a></var> (name for form submission)</li>
<li>USEMAP=<var><a href="../values.html#uri">URI</a></var> (client-side image map)</li>
<li>TYPE=<var><a href="../values.html#contenttype">ContentType</a></var> (content-type of object)</li>
<li>CODETYPE=<var><a href="../values.html#contenttype">ContentType</a></var> (content-type of code)</li>
<li>STANDBY=<var><a href="../values.html#text">Text</a></var> (message to show while loading)</li>
<li>TABINDEX=<var><a href="../values.html#number">NUMBER</a></var> (position in tabbing order)</li>
<li>DECLARE (do not instantiate object)</li>
<li class=transitional>ALIGN=[ top | middle | bottom | left | right] (object alignment)</li>
<li class=transitional>BORDER=<var><a href="../values.html#length">Length</a></var> (link border width)</li>
<li class=transitional>HSPACE=<var><a href="../values.html#pixels">Pixels</a></var> (horizontal gutter)</li>
<li class=transitional>VSPACE=<var><a href="../values.html#pixels">Pixels</a></var> (vertical gutter)</li>
<li><a href="../attrs.html">common attributes</a></li>
</ul>
</td>
</tr>
<tr valign=top>
<th>Contents</th>
<td><a href="param.html">PARAM</a> elements followed by <a href="../block.html">block-level elements</a> and/or <a href="../inline.html">inline elements</a></td>
</tr>
<tr valign=top>
<th>Contained in</th>
<td><a href="../head/head.html">HEAD</a>, <a href="../inline.html">inline elements</a>, <a href="../block.html">block-level elements</a> except <a href="../block/pre.html">PRE</a></td>
</tr>
</table>
<p>The <strong class=html>OBJECT</strong> element is used to include <em>objects</em> such as images, videos, Java applets, and <abbr class=initialism title="Virtual Reality Modeling Language">VRML</abbr> worlds. <strong class=html>OBJECT</strong> is intended to replace the more specific <strong class=html><a href="img.html">IMG</a></strong> and <strong class=html><a href="applet.html">APPLET</a></strong> elements, as well as the proprietary <strong class=html><a href="http://home.netscape.com/assist/net_sites/new_html3_prop.html#Embed">EMBED</a></strong> and <strong class=html><a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/BGSOUND.asp">BGSOUND</a></strong> elements, though a <a href="http://www.student.oulu.fi/%7esairwas/object-test/results/" title="OBJECT test suite results">lack of browser support and severe bugs</a> in supporting browsers make the other elements a better choice for the time being.</p>
<p><strong class=html>OBJECT</strong>'s <strong class=html>DATA</strong> attribute specifies the <abbr class=initialism title="Uniform Resource Identifier">URI</abbr> of the embedded object. Relative <abbr class=initialism title="Uniform Resource Identifier">URI</abbr>s are interpreted with respect to the <strong class=html>CODEBASE</strong> attribute if it is given.</p>
<p>The <strong class=html>WIDTH</strong> and <strong class=html>HEIGHT</strong> attributes define the dimensions of the object. The value may be given in pixels or as a percentage of the parent element's width or height. <em>Most browsers require the <strong class=html>WIDTH</strong> and <strong class=html>HEIGHT</strong> attributes for all objects embedded using <strong class=html>OBJECT</strong>.</em></p>
<p>The <strong class=html>CLASSID</strong> may be used to specify an implementation for the object. Java applets, Python applets, and ActiveX controls all provide implementations for the embedded object, and so are specified with the <strong class=html>CLASSID</strong> attribute, as in the following example:</p>
<p class=example><code class=html><OBJECT CLASSID="yahtzee.py" CODETYPE="application/x-python" STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game"><br><OBJECT CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 STANDBY="Ready to play Yahtzee?" TITLE="My Yahtzee Game"><br><OBJECT DATA="yahtzee.gif" TYPE="image/gif" TITLE="A Yahtzee animation" WIDTH=200 HEIGHT=100><br>Yahtzee is my <EM>favorite</EM> game!<br></OBJECT><br></OBJECT><br></OBJECT></code></p>
<p>This example also demonstrates the use of alternate content for browsers that cannot display the embedded object. In the example, a Yahtzee game written in Python is used if the browser supports it. A Java version is provided as an alternate for browsers that do not support Python applets. An image is given for browsers that cannot show the Java or Python applets, and plain text is used as a final alternate if images are not loaded. Note that <strong class=html>OBJECT</strong> is backwards compatible with pre-HTML4.0 browsers since they will ignore the <strong class=html><OBJECT></strong> tags and render the innermost alternate content (the text in the example).</p>
<p>The preceding example also makes use of the <strong class=html>TYPE</strong> and <strong class=html>CODETYPE</strong> attributes to allow browsers to avoid requesting a file that they cannot render. The <strong class=html>TYPE</strong> attribute specifies the media type of the resource referenced by the <strong class=html>DATA</strong> attribute while the <strong class=html>CODETYPE</strong> attribute specifies the media type of the <strong class=html>CLASSID</strong> data.</p>
<p>The <strong class=html>STANDBY</strong> attribute is also utilized in the example. This attribute provides short text to display while the object is loading.</p>
<p>The <strong class=html>ARCHIVE</strong> attribute can specify a space-separated list of archived files (either absolute <abbr class=initialism title="Uniform Resource Identifier">URI</abbr>s or <abbr class=initialism title="Uniform Resource Identifier">URI</abbr>s relative to the <strong class=html>CODEBASE</strong>), allowing the browser to download many files with a single connection and hence decreasing the total download time. The standard archive format for Java files is <a href="http://java.sun.com/products/jdk/1.1/docs/guide/jar/index.html">JAR</a>. JAR files can be created with the <strong>jar</strong> tool included with the <a href="http://java.sun.com/products/jdk/">Java Development Kit</a> 1.1 and up.</p>
<p>The <strong class=html>DECLARE</strong> attribute makes the object a declaration that is not immediately instantiated. This allows the object to be instantiated from a link, button, or object later in the same document. The <strong class=html><a href="../attrs.html#id">ID</a></strong> attribute must be used with declared objects as an identifier for the instantiating element. For example:</p>
<p class=example><code class=html><OBJECT DECLARE ID=yahtzee CLASSID="java:Yahtzee.class" CODETYPE="application/java" WIDTH=400 HEIGHT=250 TITLE="My Yahtzee Game"><br><IMG SRC="yahtzee.gif" ALT="You get the dice!" TITLE="Yahtzee animation"><br></OBJECT><br><var>...</var><br><P>Ready to <A HREF="#yahtzee">play Yahtzee</A>?</P></code></p>
<p>The <strong class=html>OBJECT</strong> element may contain <strong class=html><a href="param.html">PARAM</a></strong> elements--before any other content--to provide run-time initialization data. The following example embeds a video, with an audio clip for alternate content, and includes parameters commonly understood by audio/video plug-ins. Note the placement of <strong class=html>PARAM</strong> elements <em>before</em> alternate content.</p>
<p class=example><code class=html><OBJECT DATA="mlk.mov" TYPE="video/quicktime" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech" WIDTH=150 HEIGHT=150><br><PARAM NAME=pluginspage VALUE="http://quicktime.apple.com/"><br><PARAM NAME=autoplay VALUE=true><br><OBJECT DATA="mlk.wav" TYPE="audio/x-wav" TITLE="Martin Luther King's &quot;I Have a Dream&quot; speech"><br><PARAM NAME=autostart VALUE=true><br><PARAM NAME=hidden VALUE=true><br><A HREF="mlk.html">Full text of Martin Luther King's "I Have a Dream" speech</A><br></OBJECT><br></OBJECT></code></p>
<p><a name=csim>The <strong class=html>USEMAP</strong> attribute</a> can be used with <strong class=html>OBJECT</strong> to embed a clickable image where different coordinates have different link destinations. Image maps via the <strong class=html><a href="img.html">IMG</a></strong> element are better supported, but <strong class=html>OBJECT</strong>-based image maps allow a full textual alternative for browsers not loading images. The <strong class=html>USEMAP</strong> attribute points to a <strong class=html><a href="map.html">MAP</a></strong> element whose contents define the links of the various coordinates. The <strong class=html>MAP</strong> may be included within the <strong class=html>OBJECT</strong>, in which case its contents are not rendered on image-loading browsers, or it may be given outside the <strong class=html>OBJECT</strong> element so that its contents are rendered.</p>
<p>The following example gives two images, one an alternate if the first type of image is not supported. The images share a single image map definition, which is included within the <strong class=html>OBJECT</strong> element. The <strong class=html>MAP</strong> element contains a menu of links to be rendered on browsers not loading images.</p>
<p class=example><code class=html><OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200><br><OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200><br><MAP NAME=map><br><UL><br><LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI><br><LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI><br><LI><A HREF="/tools/" COORDS="205,5,295,195">Tools</A></LI><br></UL><br></MAP><br></OBJECT><br></OBJECT></code></p>
<p>The <strong class=html>TABINDEX</strong> attribute specifies a number between 0 and 32767 to indicate the tabbing order of the element. An object with <strong class=html>TABINDEX=0</strong> or no <strong class=html>TABINDEX</strong> attribute will be visited after any elements with a positive <strong class=html>TABINDEX</strong>. Among positive <strong class=html>TABINDEX</strong> values, the lower number receives focus first. In the case of a tie, the element appearing first in the <abbr class=initialism title="HyperText Markup Language">HTML</abbr> document takes precedence.</p>
<div class=transitional>
<p>The <strong class=html>ALIGN</strong> attribute, <a href="../deprecated.html">deprecated</a> in HTML 4.0, specifies the alignment of the object. The values <strong class=html>top</strong>, <strong class=html>middle</strong>, and <strong class=html>bottom</strong> specify the object's position with respect to surrounding content on its left and right.</p>
<div class=note>
<p><strong class=html>ALIGN=middle</strong> aligns the center of the object with the current baseline. To center the object horizontally on the page, place the object in a centered block, <i lang=la>e.g.</i>,</p>
<p class=example><code class=html><P ALIGN=center><OBJECT DATA="foo.mov" TYPE="video/quicktime"></OBJECT></P></code></p>
</div>
<p>The other <strong class=html>ALIGN</strong> values, <strong class=html>left</strong> and <strong class=html>right</strong>, specify a <em>floating</em> object; the object is placed at the left or right margin and content flows around it. To place content below the object, use <strong class=html><BR CLEAR=left|right|all></strong> as appropriate.</p>
<p class=note>The <strong class=css><a href="../../css/text/vertical-align.html">vertical-align</a></strong> and <strong class=css><a href="../../css/box/float.html">float</a></strong> properties of <a href="../../css/index.html">Cascading Style Sheets</a> provide more flexible methods of aligning objects.</p>
<p>The <strong class=html>BORDER</strong> attribute, <a href="../deprecated.html">deprecated</a> in HTML4.0, specifies the width of the object's border. Specifying <strong class=html>BORDER=0</strong> will eliminate the border around a linked object in most browsers, though some allow the user to override this. Authors should only use <strong class=html>BORDER=0</strong> if the object would be clearly recognizable as a link, or as a method of de-emphasizing a link. For example:</p>
<p class=example><code class=html><A HREF="reference/"><OBJECT DATA="icon/reference.gif" WIDTH=90 HEIGHT=90 BORDER=0></OBJECT>Web Authoring Reference</A></code></p>
<p>The <a href="../deprecated.html">deprecated</a> <strong class=html>HSPACE</strong> and <strong class=html>VSPACE</strong> attributes allow an author to suggest horizontal gutters and vertical gutters, respectively, around the object. The value must be in pixels and applies to both sides of the object. <a href="../../css/index.html">Style sheets</a> provide more flexibility in specifying the space around objects.</p>
</div>
<p>The <strong class=html>OBJECT</strong> element is most useful as a <strong class=html><a href="../html/body.html">BODY</a></strong> element and can be contained within either <a href="../inline.html">inline</a> or <a href="../block.html">block-level</a> elements. The contents of <strong class=html>OBJECT</strong> should be elements that can be contained within <strong class=html>OBJECT</strong>'s parent element. For example, an <strong class=html><a href="../special/a.html">A</a></strong> element containing an <strong class=html>OBJECT</strong> should not have any block-level elements as the contents of the <strong class=html>OBJECT</strong>.</p>
<h2>More Information</h2>
<ul>
<li><a href="http://www.w3.org/TR/REC-html40/struct/objects.html#edef-OBJECT">OBJECT in <abbr class=initialism title="World Wide Web Consortium">W3C</abbr> HTML4.0 Recommendation</a></li>
<li><a href="http://www.student.oulu.fi/%7esairwas/object-test/">OBJECT test suite</a></li>
<li><a href="http://java.sun.com/docs/books/tutorial/index.html">The Java Tutorial</a></li>
<li><a href="http://www.microsoft.com/com/tech/ActiveX.asp">ActiveX Controls</a></li>
<li><a href="http://www.python.org/">Python Language Home Page</a></li>
<li><a href="http://www.libpng.org/pub/png/"><acronym>PNG</acronym> (Portable Network Graphics) Home Page</a></li>
</ul>
<div class=footer>
<address>Maintained by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a> <<a href="mailto:liam@htmlhelp.com">liam@htmlhelp.com</a>></address>
<p class=toolbar><img src="../wdglogo-small.gif" width=105 height=40 alt="Web Design Group ~"> <a href="../index.html" rel=Start>HTML4.0Reference</a>~ <a href="../olist.html">ElementsbyFunction</a>~ <a href="../alist.html">ElementsAlphabetically</a></p>
<p class=copyright>Copyright © 1998 by <a href="http://www.htmlhelp.com/%7Eliam/">Liam Quinn</a>. This material may be distributed only subject to the terms and conditions set forth in the Open Publication License, v1.0 or later (the latest version is presently available at <a href="http://www.opencontent.org/openpub/">http://www.opencontent.org/openpub/</a>).</p>
</div>
</body>
</html>
|
