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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US">
<title>Objects [Robin’s HTML 4.0 Conformance Test]</title>
<meta name="description" content="Test your Web browser’s support for HTML 4.0 objects. Part of Robin’s HTML 4.0 Conformance Test.">
<meta name="DC.Creator" content="Lionheart, Robin">
<link rel="home" href="http://www.robinlionheart.com/" title="RobinLionheart.com">
<link rel="first" href="./" title="Robin’s HTML 4.0 Test">
<link rel="prev" href="frames" title="Frames">
<link rel="next" href="objaudio" title="Objects: Audio">
<link rel="glossary" href="glossary" title="Glossary">
<link rel="author" href="http://www.robinlionheart.com/robin/" title="Robin Lionheart">
<link rel="stylesheet" href="/style/linkcolors.css" type="text/css" media="screen, tv, projection">
<link rel="stylesheet" href="html4.css" type="text/css" media="screen, tv, projection" title="Conformance Test">
<link rel="icon" href="/images/icons/htmltest.png" type="image/png">
<div id="navbar">
<ul class="nl" id="breadcrumbs"><li><a href="./" rel="first">Robin’s HTML 4.0 Test</a><ul><li>Objects</li></ul></li></ul>
<ul class="nl">
<li><a href="./" rel="first" accesskey="1" title="First: Robin’s HTML 4.0 Test">⇤<strong>1</strong>st</a></li>
<li><a href="frames" rel="prev" accesskey="P" title="Prior: Frames">←<strong>P</strong>rior</a></li>
<li><a href="objaudio" rel="next" accesskey="N" title="Next: Objects: Audio"><strong>N</strong>ext→</a></li>
</ul>
</div>
<h1>Objects (<a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#h-13.3" title="HTML 4.0 Specification">§13.3</a>)</h1>
<div class="section">
<div class="bodytext">
<p><a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#edef-object" title="HTML 4.0 Specification: Objects, Images, and Applets"><code class="element"><object></code></a> embeds objects of any type: images, movies, sounds, applets, or anything else you can send.</p>
<p>The all‐purpose <code class="element"><object></code> was potentially the most important addition in <abbr>HTML</abbr> 4.0. However, this ambitous but <a href="http://www.cs.tut.fi/~jkorpela/HTML4.0/comments.html#obj" title="Jukka Korpela’s critical review of the HTML 4.0 draft">flawed</a> element is terribly overloaded. For example, it has 17 element‐specific attributes with varied meanings and uses. Some of it is baggage inherited from Internet Explorer’s earlier, proprietary version of <code class="element"><object></code>.</p>
<p class="note"><strong class="subhead"><abbr>XHTML</abbr> 2.0:</strong> The <abbr>W3C</abbr> is considering removing <code class="element"><img></code> and <code class="element"><applet></code> in <abbr>XHTML</abbr> 2.0 in favor of a somewhat scaled back <a class="specsect" href="http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-object.html#sec_21.1." title="XHTML 2.0 Working Draft: The object element"><code class="element"><object></code></a>, which addresses a couple of Jukka Korpela’s <a href="http://www.cs.tut.fi/~jkorpela/HTML4.0/comments.html#obj" title="Jukka Korpela’s critical review of the HTML 4.0 draft">criticisms</a> of it.</p>
<p class="note">For more thorough testing of <code class="element"><object></code>, I recommend Antti Näyhä’s <a href="http://www.student.oulu.fi/~sairwas/object-test/">OBJECT test suite</a>. That suite inspired some of the tests below.</p>
</div>
</div>
<div class="section" id="type">
<h2>Content types</h2>
<div class="bodytext">
<p>The optional <a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#adef-type-OBJECT" title="HTML 4.0 Specification: Objects, Images, and Applets"><code class="attribute">type</code></a> attribute provides the <a href="glossary#content_type" class="local" title="Glossary" rel="glossary">content type</a> of the object. A Web browser can use this information to avoid downloading content types that it does not support.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>Your Web browser should not try to render the <code>image/x-unsupported</code> image. It should render the alternate markup and not a broken image placeholder.</p>
<div class="blockcode">
<em class="html4"><strong class="tested"><object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=100 height=100></strong></em><br>
<div class="indent">
<em class="html"><p></em>As expected, I could not render the <em class="html"><code></em>image/x-unsupported<em class="html"></code></em> image.<em class="html"></p></em><br>
</div>
<em class="html4"><strong class="tested"></object></strong></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result1">
<object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=100 height=100>
<p>As expected, I could not render the <code>image/x-unsupported</code> image.</p>
</object>
</div>
</div>
</div>
<div class="section" id="content">
<h2>Alternate markup (<a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#h-13.3.1" title="HTML 4.0 Specification">§13.3.1</a>)</h2>
<div class="bodytext">
<p>If an object is not rendered (ex. to ignore an unsupported content type, or to reject <a href="http://www.halcyon.com/mclain/ActiveX/">potentially dangerous ActiveX controls</a>), the contents of the <code class="element"><object></code> element are rendered instead.</p>
<p>An image marked up <code class="element"><img></code> can have alternate text, but an image marked up with <code class="element"><object></code> can have <dfn>alternate markup</dfn>.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>The <code class="element"><object></code> element allows more versatile replacements for images.</p>
<div class="blockcode">
<em class="html"><p></em>Suppose we want to use an image as a fancy horizontal divider:<em class="html"></p></em><br>
<br>
<em class="html"><div align="center"><img src="<a href="/images/test/hr-grapevine.png" type="image/png" class="local">/images/test/hr-grapevine.png</a>" height=24 width=507 alt="~~~~~~~~~~~~~~~~~~ * ~~~~~~~~~~~~~~~~~~~"><div></em><br>
<br>
<em class="html"><p></em>With <em class="html"><code><em class="entity">&lt;</em></em>img<em class="html"><em class="entity">&gt;</em></code></em>, the most appropriate alternate text for a horizontal divider is generally a series of dashes:<em class="html"></p></em><br>
<br>
<em class="html"><div align="center"><img src="data:image/x-unsupported,TEST" alt="----------------------------------------"></div></em><br>
<br>
<em class="html"><p></em>But with <em class="html"><code><em class="entity">&lt;</em></em>object<em class="html"><em class="entity">&gt;</em></code></em>, a horizontal rule can be alternate markup:<em class="html"></p></em><br>
<br>
<em class="html"><div align="center"><strong class="tested"><object data="data:image/x-unsupported,TEST" type="image/x-unsupported"></strong></em><br>
<div class="indent">
<em class="html"><hr width=507></em><br>
</div>
<em class="html"><strong class="tested"></object></strong></div></em><br>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result2">
<p>Suppose we want to use an image of a fancy horizontal divider:</p>
<div align="center"><img src="/images/test/hr-grapevine.png" height=24 width=507 alt="~~~~~~~~~~~~~~~~~~ * ~~~~~~~~~~~~~~~~~~~"></div>
<p>With <code><img></code>, the most appropriate alternate text for a horizontal divider is generally a series of dashes:</p>
<div align="center"><img src="data:image/x-unsupported,TEST" alt="----------------------------------------"></div>
<p>But with <code><object></code>, a horizontal rule can be alternate markup:</p>
<div align="center"><object data="data:image/x-unsupported,TEST" type="image/x-unsupported">
<hr width=507>
</object></div>
</div>
</div>
</div>
<div class="section" id="nest">
<h2>Nested objects</h2>
<div class="bodytext">
<p>You can even use another object as alternate markup. By nesting <code class="element"><object></code> elements inside each other, you can provide several alternate content types. If a Web browser doesn’t support the primary content type, it can gracefully switch to an alternate one.</p>
<p>The object need not be of a similar type. For example, an embedded <a href="objvideo" class="local">video clip</a> could have a static image as an alternate.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>Here is a picture of my cat in <acronym title="Tagged Image File Format">TIFF</acronym>, <abbr title="Portable Network Graphics">PNG</abbr> and <abbr title="Joint Photographic Experts Group">JPEG</abbr> formats.</p>
<p>If your Web browser supports any of these image formats (every graphical browser I’ve used supports <abbr>JPEG</abbr>), it should render one and only one of the images below. The image should be rendered inline, not as a frame with scrollbars.</p>
<p>If your Web browser can not render any of them, or if it has images disabled, it should render the alternate markup and not a broken image placeholder.</p>
<p>Few Web browsers support <acronym>TIFF</acronym> images. If yours does not, watch any status messages as your Web browser loads the page; it should not even try to download the <acronym>TIFF</acronym> version of the image.</p>
<div class="blockcode">
<em class="html4"><object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=100 height=100></em><br>
<div class="indent">
<em class="html4"><strong class="tested"><object data="<a href="/images/test/test.tiff" type="image/tiff" class="local">/images/test/test.tiff</a>" type="image/tiff" width=100 height=100></strong></em><br>
<div class="indent">
<em class="html4"><strong class="tested"><object data="<a href="/images/test/test.png" type="image/png" class="local">/images/test/test.png</a>" type="image/png" width=100 height=100></strong></em><br>
<div class="indent">
<em class="html4"><strong class="tested"><object data="<a href="/images/test/test.jpeg" type="image/jpeg" class="local">/images/test/test.jpeg</a>" type="image/jpeg" width=100 height=100></strong></em><br>
<div class="indent">
<em class="html"><p></em>My cat <em class="html"><a href="/robin/petpix"></em>Velcro<em class="html"></a></em> enjoys a good roll in the dirt.<em class="html"></p></em><br>
</div>
<em class="html4"><strong class="tested"></object></strong></em><br>
</div>
<em class="html4"><strong class="tested"></object></strong></em><br>
</div>
<em class="html4"><strong class="tested"></object></strong></em><br>
</div>
<em class="html4"></object></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result3">
<object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=100 height=100>
<object data="/images/test/test.tiff" type="image/tiff" width=100 height=100>
<object data="/images/test/test.png" type="image/png" width=100 height=100>
<object data="/images/test/test.jpeg" type="image/jpeg" width=100 height=100>
<p>My cat <a href="/robin/petpix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>
</object>
</object>
</object>
</div>
<p class="note msie">Related <em class="browser">Internet Explorer</em> bug reports: <a href="http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerStandardsSupport">Channel9 Wiki: Internet Explorer Standards Support</a>.</p>
</div>
</div>
<div class="section" id="scale">
<h2>Scaling (<a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#h-13.7.1" title="HTML 4.0 Specification">§13.7.1</a>)</h2>
<div class="bodytext">
<p>The <a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#adef-width-IMG" title="HTML 4.0 Specification: Objects, Images, and Applets"><code class="attribute">width</code></a> and <a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#adef-height-IMG" title="HTML 4.0 Specification: Objects, Images, and Applets"><code class="attribute">height</code></a> attributes tell a Web browser how much space to reserve for an object.</p>
<p>Images should be <em>scaled</em> (squashed or stretched) to the specified width and/or height, overriding their natural dimensions.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>If your Web browser renders this image, it should be taller and narrower than normal.</p>
<div class="blockcode">
<em class="html4"><object data="<a href="/images/test/test.png" type="image/png" class="local">/images/test/test.png</a>" type="image/png" <em class="html4"><strong class="tested">width=75 height=150</strong></em>></em><br>
<div class="indent">
<em class="html"><p></em>My cat <em class="html"><a href="/robin/petpix" title="Pet Pix"></em>Velcro<em class="html"></a></em> enjoys a good roll in the dirt.<em class="html"></p></em><br>
</div>
<em class="html4"></object></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result4">
<object data="/images/test/test.png" type="image/png" width=75 height=150>
<p>My cat <a href="/robin/petpix" title="Pet Pix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>
</div>
<p class="note msie">Related <em class="browser">Internet Explorer</em> bug reports: <a href="http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerStandardsSupport">Channel9 Wiki: Internet Explorer Standards Support</a>.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>Let’s complicate it by trying some nested images of different scales.</p>
<p>If your Web browser renders the <abbr>PNG</abbr> image, it should be stretched taller and narrower than normal. If it renders the <abbr>JPEG</abbr> image, it should be squashed shorter and wider than normal.</p>
<div class="blockcode">
<em class="html4"><object data="data:image/x-unsupported,TEST" type="image/x-unsupported" <em class="html4"><strong class="tested">width=30 height=30</strong></em>></em><br>
<div class="indent">
<em class="html4"><object data="<a href="/images/test/test.png" type="image/png" class="local">/images/test/test.png</a>" type="image/png" <em class="html4"><strong class="tested">width=75 height=150</strong></em>></em><br>
<div class="indent">
<em class="html4"><object data="<a href="/images/test/test.jpeg" type="image/jpeg" class="local">/images/test/test.jpeg</a>" type="image/jpeg" <em class="html4"><strong class="tested">width=150 height=75</strong></em>></em><br>
<div class="indent">
<em class="html"><p></em>My cat <em class="html"><a href="/robin/petpix" title="Pet Pix"></em>Velcro<em class="html"></a></em> enjoys a good roll in the dirt.<em class="html"></p></em><br>
</div>
<em class="html4"></object></em>
</div>
<em class="html4"></object></em>
</div>
<em class="html4"></object></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result5">
<object data="data:image/x-unsupported,TEST" type="image/x-unsupported" width=30 height=30>
<object data="/images/test/test.png" type="image/png" width=75 height=150>
<object data="/images/test/test.jpeg" type="image/jpeg" width=150 height=75>
<p>My cat <a href="/robin/petpix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>
</object>
</object>
</div>
<p class="note msie">Related <em class="browser">Internet Explorer</em> bug reports: <a href="http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerStandardsSupport">Channel9 Wiki: Internet Explorer Standards Support</a>.</p>
</div>
</div>
<div class="section" id="map">
<h2>Image maps (<a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#h-13.6" title="HTML 4.0 Specification">§13.6</a>)</h2>
<div class="bodytext">
<p><em>Image maps</em> link regions of an image to other webpages. Using <code class="element"><object></code>, you can define those regions in the links within the alternate markup. Not only does this simplify the source code, it also ensures that every link in the image map can be accessed by Web browsers that do not load the image.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>In a graphical Web browser, selecting the image of the cat (and not the text identifying the image format) should bring you to a page of cat pictures.</p>
<div class="blockcode">
<em class="html4"><object data="<a href="/images/test/test.jpeg" type="image/jpeg" class="local">/images/test/test.jpeg</a>" type="image/jpeg" width=100 height=100 <em class="html4"><strong class="tested">usemap="#catmap"</strong></em>></em><br>
<div class="indent">
<em class="html4"><strong class="tested"><map name="catmap"></strong></em><br>
<div class="indent">
<em class="html"><p></em>My cat <em class="html"><a href="/robin/petpix" title="Pet Pix" <em class="html4"><strong class="tested">shape="rect" coords="45,15,200,230"</strong></em>></em>Velcro<em class="html"></a></em> enjoys a good roll in the dirt.<em class="html"></p></em><br>
</div>
<em class="html4"><strong class="tested"></map></strong></em><br>
</div>
<em class="html4"></object></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result6">
<object data="/images/test/test.jpeg" type="image/jpeg" width=100 height=100 usemap="#catmap">
<map name="catmap">
<p>My cat <a href="/robin/petpix" title="Pet Pix" shape="rect" coords="0,0,100,66">Velcro</a> enjoys a good roll in the dirt.</p>
</map>
</object>
</div>
<p class="note msie">Related <em class="browser">Internet Explorer</em> bug reports: <a href="http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerStandardsSupport">Channel9 Wiki: Internet Explorer Standards Support</a>.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>Image maps can have multiple, overlapping regions of different shapes.</p>
<p>The overlapped regions should be mapped to the shape in the foreground.</p>
<div class="blockcode">
<em class="html4"><object data="<a href="/images/test/maptest.svg" type="image/svg+xml" class="local">/images/test/maptest.svg</a>" type="image/svg+xml" width=200 height=200 <em class="html4"><strong class="tested">usemap="#shapes"</strong></em>></em><br>
<div class="indent">
<em class="html4"><object data="<a href="/images/test/maptest.png" type="image/png" class="local">/images/test/maptest.png</a>" type="image/png" width=200 height=200 <em class="html4"><strong class="tested">usemap="#shapes"</strong></em>></em><br>
<div class="indent">
<em class="html4"><object data="<a href="/images/test/maptest.jpeg" type="image/jpeg" class="local">/images/test/maptest.jpeg</a>" type="image/jpeg" width=200 height=200 <em class="html4"><strong class="tested">usemap="#shapes"</strong></em>></em><br>
<div class="indent">
<em class="html4"><strong class="tested"><map name="shapes"></strong></em><br>
<div class="indent">
<em class="html"><ul></em><br>
<div class="indent">
<em class="html"><li><a href="#triangle" title="green triangle" <em class="html4"><strong class="tested">shape="poly" coords="100,10, 58,94, 142,94, 100,10"</strong></em>></em>green triangle<em class="html"></a></em><br>
<em class="html"><li><a href="#cross" title="blue cross" <em class="html4"><strong class="tested">shape="poly" coords="80,108, 60,128, 80,148, 60,168, 80,188, 100,168, 120,188, 140,168, 120,148, 140,128, 120,108, 100,128, 80,108"</strong></em>></em>blue cross<em class="html"></a></em><br>
<em class="html"><li><a href="#square" title="magenta square" <em class="html4"><strong class="tested">shape="rect" coords="10,58, 94,142"</strong></em>></em>magenta square<em class="html"></a></em><br>
<em class="html"><li><a href="#circle" title="red circle" <em class="html4"><strong class="tested">shape="circle" coords="148,100, 42"</strong></em>></em>red circle<em class="html"></a></em><br>
</div>
<em class="html"></ul></em><br>
</div>
<em class="html4"><strong class="tested"></map></strong></em><br>
</div>
<em class="html4"></object></em>
</div>
<em class="html4"></object></em>
</div>
<em class="html4"></object></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result7">
<object data="/images/test/maptest.svg" type="image/svg+xml" width=200 height=200 usemap="#maptest">
<object data="/images/test/maptest.png" type="image/png" width=200 height=200 usemap="#maptest">
<object data="/images/test/maptest.jpeg" type="image/jpeg" width=200 height=200 usemap="#maptest">
<map name="maptest">
<ul>
<li><a href="#triangle" title="green triangle" shape="poly" coords="100,10, 58,94, 142,94, 100,10">green triangle</a>
<li><a href="#cross" title="blue cross" shape="poly" coords="80,108, 60,128, 80,148, 60,168, 80,188, 100,168, 120,188, 140,168, 120,148, 140,128, 120,108, 100,128, 80,108">blue cross</a>
<li><a href="#square" title="magenta square" shape="rect" coords="10,58, 94,142">magenta square</a>
<li><a href="#circle" title="red circle" shape="circle" coords="148,100, 42">red circle</a>
</ul>
</map>
</object>
</object>
</object>
</div>
<p class="note bugzilla">Related <em class="browser">Mozilla</em> bug reports: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=Bearded-Imagemap">Bearded-Imagemap</a>.</p>
<p class="note msie">Related <em class="browser">Internet Explorer</em> bug reports: <a href="http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerStandardsSupport">Channel9 Wiki: Internet Explorer Standards Support</a>.</p>
</div>
</div>
<div class="section" id="codebase">
<h2>Codebase</h2>
<div class="bodytext">
<p>The <a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#adef-codebase-OBJECT" title="HTML 4.0 Specification: Objects, Images, and Applets"><code class="attribute">codebase</code></a> attribute sets the base location from which to resolve a relative <acronym>URL</acronym> in the <a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#adef-data-OBJECT" title="HTML 4.0 Specification: Objects, Images, and Applets"><code class="attribute">data</code></a> and other attributes. The <code class="attribute">codebase</code> attribute is used mainly for applets that require loading several files.</p>
<p class="note"><strong class="subhead"><abbr>XHTML</abbr> 2.0:</strong> In <abbr>XHTML</abbr> 2.0, the <abbr>W3C</abbr> is considering replacing the <code class="attribute">codebase</code> attribute with a more general <code class="attribute">xml:base</code> attribute.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>If your Web browser can display <abbr>JPEG</abbr> images and implements <code class="attribute">codebase</code> correctly, the image below should be rendered.</p>
<div class="blockcode">
<em class="html4"><object data="test.jpeg" <em class="html4"><strong class="tested">codebase="/images/test/"</strong></em> type="image/jpeg" width=100 height=100></em><br>
<div class="indent">
<em class="html"><p></em>My cat <em class="html"><a href="/robin/petpix" title="Pet Pix"></em>Velcro<em class="html"></a></em> enjoys a good roll in the dirt.<em class="html"></p></em><br>
</div>
<em class="html4"></object></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result8">
<object data="test.jpeg" codebase="/images/test/" type="image/jpeg" width=100 height=100>
<p>My cat <a href="/robin/petpix" title="Pet Pix">Velcro</a> enjoys a good roll in the dirt.</p>
</object>
</div>
<p class="note bugzilla">Related <em class="browser">Mozilla</em> bug reports: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=Object-Codebase">Object-Codebase</a>.</p>
<p class="note msie">Related <em class="browser">Internet Explorer</em> bug reports: <a href="http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerStandardsSupport">Channel9 Wiki: Internet Explorer Standards Support</a>.</p>
</div>
</div>
<div class="section" id="iframe">
<h2>Embedded pages (<a class="specsect" href="http://www.w3.org/TR/html4/struct/objects.html#h-13.5" title="HTML 4.0 Specification">§13.5</a>)</h2>
<div class="bodytext">
<p>Though this page concentrates on images, <code class="element"><object></code> may be used with <a href="objaudio" class="local" rel="section">audio clips</a>, <a href="objvideo" class="local" rel="section">video clips</a>, applets, and other kinds of objects.</p>
</div>
<div class="illo">
<h3>Example:</h3>
<p>You can even use it with text files and <abbr>HTML</abbr>, to <em>embed one page in another</em> like a floating frame.</p>
<div class="blockcode">
<em class="html4"><object data="<a href="test.txt" type="text/plain" class="local">test.txt</a>" <em class="html4"><strong class="tested">type="text/plain" standby="Loading..."></strong></em></em><br>
<div class="indent">
<em class="html"><p></em>If your Web browser had supported it, <em class="html"><a href="test.txt"></em>a simple text file<em class="html"></a></em> would be embedded here.<em class="html"></p></em><br>
</div>
<em class="html4"></object></em>
</div>
<h4 class="resultheader">Your Web browser renders it like this:</h4>
<div class="results" id="result9">
<object data="test.txt" type="text/plain" standby="Loading...">
<p>If your Web browser had supported it, <a href="test.txt">a simple text file</a> would be embedded here.</p>
</object>
</div>
<p class="note msie">Related <em class="browser">Internet Explorer</em> bug reports: <a href="http://channel9.msdn.com/wiki/default.aspx/Channel9.InternetExplorerStandardsSupport">Channel9 Wiki: Internet Explorer Standards Support</a>.</p>
</div>
</div>
<div id="browserver">
<h2>Your Browser</h2>
<p>Your Web browser identified itself as <strong><code id="useragent">Wget/1.11.4</code></strong> when it requested this page.</p>
<script type="text/javascript" src="browserid.js"></script>
<noscript><p>Your Web browser did not run a script to reveal how it identifies itself to scripts.</p></noscript>
</div>
<div id="footer">
<div id="buttons">
<a href="http://www.mozilla.com/firefox/" title="Mozilla Firefox"><object type="image/png" width="80" height="15" id="firefox_button" data="/images/buttons/firefox.png">Get Firefox</object></a>
<a href="http://my.opera.com/rlionheart/affiliate/" title="Opera"><object type="image/png" width="80" height="15" id="opera_button" data="/images/buttons/opera.png">Get Opera</object></a>
<a rel="license" href="http://creativecommons.org/licenses/by-sa/2.5/" title="Creative Commons Deed"><object type="image/png" width="80" height="15" id="cc_button" data="/images/buttons/cc.png">Some rights reserved.</object></a>
<a href="http://www.htmlhelp.com/cgi-bin/validate.cgi?url=referer" title="WDG HTML Validation Service"><object type="image/png" width="80" height="15" id="html401_button" data="/images/buttons/html401.png">Valid HTML 4.01 Transitional</object></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="W3C CSS Validation Service"><object type="image/png" width="80" height="15" id="css_button" data="/images/buttons/css.png">Valid CSS</object></a>
</div>
<p><a rel="copyright" href="/copyright" class="local">©</a> 1998 <span class="vcard"><a rel="home" href="/" class="local fn">Robin Lionheart</a> (<a rev="made" href="mailto:lionheart@robinlionheart.com" class="email local">lionheart@robin­lionheart.com</a>) [<a href="/robin/pubkey" class="local">public key</a>]</span></p>
<div id="dehanced">
<p>Best read with a browser that supports <abbr title="Extensible Hypertext Markup Language">XHTML</abbr>, <abbr title="Cascading Style Sheets level 2">CSS 2</abbr>, and <abbr title="Portable Network Graphics">PNG</abbr> images. I recommend <a href="http://www.mozilla.org/products/firefox/">Firefox</a>.</p>
<p>Degraded to fit your browser (JavaScript MIME type).</p>
</div> </div>
|
