objects.html
102 KB
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
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
1287
1288
1289
1290
1291
1292
1293
1294
1295
1296
1297
1298
1299
1300
1301
1302
1303
1304
1305
1306
1307
1308
1309
1310
1311
1312
1313
1314
1315
1316
1317
1318
1319
1320
1321
1322
1323
1324
1325
1326
1327
1328
1329
1330
1331
1332
1333
1334
1335
1336
1337
1338
1339
1340
1341
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
1364
1365
1366
1367
1368
1369
1370
1371
1372
1373
1374
1375
1376
1377
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
1397
1398
1399
1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
1434
1435
1436
1437
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
1537
1538
1539
1540
1541
1542
1543
1544
1545
1546
1547
1548
1549
1550
1551
1552
1553
1554
1555
1556
1557
1558
1559
1560
1561
1562
1563
1564
1565
1566
1567
1568
1569
1570
1571
1572
1573
1574
1575
1576
1577
1578
1579
1580
1581
1582
1583
1584
1585
1586
1587
1588
1589
1590
1591
1592
1593
1594
1595
1596
1597
1598
1599
1600
1601
1602
1603
1604
1605
1606
1607
1608
1609
1610
1611
1612
1613
1614
1615
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627
1628
1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
1651
1652
1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
1737
1738
1739
1740
1741
1742
1743
1744
1745
1746
1747
1748
1749
1750
1751
1752
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
1790
1791
1792
1793
1794
1795
1796
1797
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
1826
1827
1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
1852
1853
1854
1855
1856
1857
1858
1859
1860
1861
1862
1863
1864
1865
1866
1867
1868
1869
1870
1871
1872
1873
1874
1875
1876
1877
1878
1879
1880
1881
1882
1883
1884
1885
1886
1887
1888
1889
1890
1891
1892
1893
1894
1895
1896
1897
1898
1899
1900
1901
1902
1903
1904
1905
1906
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
2078
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
2090
2091
2092
2093
2094
2095
2096
2097
2098
2099
2100
2101
2102
2103
2104
2105
2106
2107
2108
2109
2110
2111
2112
2113
2114
2115
2116
2117
2118
2119
2120
2121
2122
2123
2124
2125
2126
2127
2128
2129
2130
2131
2132
2133
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143
2144
2145
2146
2147
2148
2149
2150
2151
2152
2153
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168
2169
2170
2171
2172
2173
2174
2175
2176
2177
2178
2179
2180
2181
2182
2183
2184
2185
2186
2187
2188
2189
2190
2191
2192
2193
2194
2195
2196
2197
2198
2199
2200
2201
2202
2203
2204
2205
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239
2240
2241
2242
2243
2244
<!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>