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">&nbsp;<a href="links.html">previous</a>
&nbsp; <a href="../present/styles.html">next</a> &nbsp; <a href= 
"../cover.html#minitoc">contents</a> &nbsp; <a href="../index/elements.html">
elements</a> &nbsp; <a href="../index/attributes.html">attributes</a> &nbsp; <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>
&lt;BODY&gt;
&lt;P&gt;Here's a closeup of the Grand Canyon:
&lt;OBJECT data="canyon.png" type="image/png"&gt;
This is a &lt;EM&gt;closeup&lt;/EM&gt; of the Grand Canyon.
&lt;/OBJECT&gt;
&lt;/BODY&gt;
</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">
&lt;!-- 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 --&gt;
&lt;!ELEMENT <a href="objects.html#edef-IMG" class="noxref"><samp class=
"einst">IMG</samp></a> - O EMPTY                -- Embedded image --&gt;
&lt;!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 --
  &gt;
</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>
&lt;BODY&gt;
&lt;P&gt;I just returned from vacation! Here's a photo of my family at the lake:
&lt;IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
     alt="A photo of my family at the lake."&gt;
&lt;/BODY&gt;
</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>
&lt;BODY&gt;
&lt;P&gt;I just returned from vacation! Here's a photo of my family at the lake:
&lt;OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
        type="image/png"&gt;
A photo of my family at the lake.
&lt;/OBJECT&gt;
&lt;/BODY&gt;
</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>
&lt;BODY&gt;
&lt;P&gt;
&lt;IMG src="sitemap.gif"
     alt="HP Labs Site Map"
     longdesc="sitemap.html"&gt;
&lt;/BODY&gt;
</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">
&lt;!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 --&gt;
&lt;!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 --
  &gt;
</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>
    
&lt;P&gt;&lt;OBJECT classid="http://www.miamachina.it/analogclock.py"&gt;
&lt;/OBJECT&gt;
</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>
    
&lt;P&gt;&lt;OBJECT classid="http://www.miamachina.it/analogclock.py"&gt;
An animated clock.
&lt;/OBJECT&gt;
</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>
&lt;P&gt;                 &lt;!-- First, try the Python applet --&gt;
&lt;OBJECT title="The Earth as seen from space" 
        classid="http://www.observer.mars/TheEarth.py"&gt;
                    &lt;!-- Else, try the MPEG video --&gt;
  &lt;OBJECT data="TheEarth.mpeg" type="application/mpeg"&gt;
                    &lt;!-- Else, try the GIF image --&gt;
    &lt;OBJECT data="TheEarth.gif" type="image/gif"&gt;
                    &lt;!-- Else render the text --&gt;
     The &lt;STRONG&gt;Earth&lt;/STRONG&gt; as seen from space.
    &lt;/OBJECT&gt;
  &lt;/OBJECT&gt;
&lt;/OBJECT&gt;
</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>
&lt;P&gt;
&lt;OBJECT id="clock1"
        classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="data:application/x-oleobject;base64, <em>...base64 data...</em>"&gt;
    A clock.
&lt;/OBJECT&gt;
</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">
&lt;!ELEMENT <a href="objects.html#edef-PARAM" class="noxref"><samp class=
"einst">PARAM</samp></a> - O EMPTY              -- named property value --&gt;
&lt;!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 --
  &gt;
</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>
    
&lt;P&gt;&lt;OBJECT classid="http://www.miamachina.it/analogclock.py"&gt;
&lt;PARAM name="height" value="40" valuetype="data"&gt;
&lt;PARAM name="width" value="40" valuetype="data"&gt;
This user agent cannot render Python applications.
&lt;/OBJECT&gt;
</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>
&lt;P&gt;&lt;OBJECT classid="http://www.gifstuff.com/gifappli"
       standby="Loading Elvis..."&gt;
&lt;PARAM name="Init_values"
       value="./images/elvis.gif"&gt;
       valuetype="ref"&gt;
&lt;/OBJECT&gt;
</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>
&lt;P&gt;
&lt;OBJECT id="obj1"&gt;
   &lt;PARAM name="param1"&gt;
   &lt;OBJECT id="obj2"&gt;
      &lt;PARAM name="param2"&gt;
   &lt;/OBJECT&gt;
&lt;/OBJECT&gt;
</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>
&lt;P&gt;&lt;OBJECT classid="java:program.start"&gt;
&lt;/OBJECT&gt;
</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>
&lt;OBJECT codetype="application/java-archive"
        classid="java:program.start"&gt;
&lt;/OBJECT&gt;
</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>
&lt;OBJECT codetype="application/java-archive"
        classid="java:program.start"&gt;
        codebase="http://foooo.bar.com/java/myimplementation/"
&lt;/OBJECT&gt;
</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>
&lt;P&gt;&lt;OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
        data="http://www.acme.com/ole/clock.stm"&gt;
This application is not supported.
&lt;/OBJECT&gt;
</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>
&lt;P&gt;&lt;OBJECT declare
        id="earth.declaration" 
        data="TheEarth.mpeg" 
        type="application/mpeg"&gt;
   The &lt;STRONG&gt;Earth&lt;/STRONG&gt; as seen from space.
&lt;/OBJECT&gt;
<em>...later in the document...</em>
&lt;P&gt;A neat &lt;A href="#earth.declaration"&gt; animation of The Earth!&lt;/A&gt;
</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>
&lt;P&gt;&lt;OBJECT declare
     id="tribune"
     type="application/x-webfont"
     data="tribune.gif"&gt;
&lt;/OBJECT&gt;
<em>...view the poem in KublaKhan.txt here...</em>
&lt;P&gt;&lt;OBJECT classid="http://foo.bar.com/poem_viewer" 
           data="KublaKhan.txt"&gt;
&lt;PARAM name="font" valuetype="object" value="#tribune"&gt;
&lt;P&gt;You're missing a really cool poem viewer ...
&lt;/OBJECT&gt;
</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>
&lt;APPLET code="Bubbles.class" width="500" height="500"&gt;
Java applet that draws animated bubbles.
&lt;/APPLET&gt;
</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>
&lt;P&gt;&lt;OBJECT codetype="application/java"
        classid="java:Bubbles.class"
        width="500" height="500"&gt;
Java applet that draws animated bubbles.
&lt;/OBJECT&gt;
</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>
&lt;APPLET code="AudioItem" width="15" height="15"&gt;
&lt;PARAM name="snd" value="Hello.au|Welcome.au"&gt;
Java applet that plays a welcoming sound.
&lt;/APPLET&gt;
</pre>

<p>may be rewritten as follows with <a href="objects.html#edef-OBJECT" class= 
"noxref"><samp class="einst">OBJECT</samp></a>:</p>

<pre>
&lt;OBJECT codetype="application/java"
        classid="AudioItem" 
        width="15" height="15"&gt;
&lt;PARAM name="snd" value="Hello.au|Welcome.au"&gt;
Java applet that plays a welcoming sound.
&lt;/OBJECT&gt;
</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>
&lt;OBJECT data="embed_me.html"&gt;
Warning: embed_me.html could not be embedded.
&lt;/OBJECT&gt;
<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">
&lt;!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 --&gt;
&lt;!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 --
  &gt;
</pre>
</div>

<p><em>Start tag: <strong>required</strong>, End tag: <strong>
required</strong></em></p>

<div class="dtd-fragment">
<pre class="dtd-fragment">
&lt;!ELEMENT <a href="objects.html#edef-AREA" class="noxref"><samp class=
"einst">AREA</samp></a> - O EMPTY               -- client-side image map area --&gt;
&lt;!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 --
  &gt;
</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">&nbsp;</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>
&lt;HTML&gt;
   &lt;HEAD&gt;
      &lt;TITLE&gt;The cool site!&lt;/TITLE&gt;
   &lt;/HEAD&gt;
   &lt;BODY&gt;
     &lt;P&gt;&lt;OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"&gt;
     &lt;MAP name="map1"&gt;
       &lt;P&gt;Navigate the site:
       &lt;A href="guide.html" shape="rect" coords="0,0,118,28"&gt;Access Guide&lt;/a&gt; |
       &lt;A href="shortcut.html" shape="rect" coords="118,0,184,28"&gt;Go&lt;/A&gt; |
       &lt;A href="search.html" shape="circle" coords="184,200,60"&gt;Search&lt;/A&gt; |
       &lt;A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"&gt;Top Ten&lt;/A&gt;
     &lt;/MAP&gt;
     &lt;/OBJECT&gt;
   &lt;/BODY&gt;
&lt;/HTML&gt;
</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>
&lt;HTML&gt;
   &lt;HEAD&gt;
      &lt;TITLE&gt;The cool site!&lt;/TITLE&gt;
   &lt;/HEAD&gt;
   &lt;BODY&gt;
     &lt;P&gt;&lt;OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"&gt;
     &lt;/OBJECT&gt;

     <em>...the rest of the page here...</em>

     &lt;MAP name="map1"&gt;
       &lt;P&gt;Navigate the site:
       &lt;A href="guide.html" shape="rect" coords="0,0,118,28"&gt;Access Guide&lt;/a&gt; |
       &lt;A href="shortcut.html" shape="rect" coords="118,0,184,28"&gt;Go&lt;/A&gt; |
       &lt;A href="search.html" shape="circle" coords="184,200,60"&gt;Search&lt;/A&gt; |
       &lt;A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"&gt;Top Ten&lt;/A&gt;
     &lt;/MAP&gt;
   &lt;/BODY&gt;
&lt;/HTML&gt;
</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>
&lt;P&gt;&lt;OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"&gt;
   &lt;P&gt;This is a navigation bar.
   &lt;/OBJECT&gt;

&lt;MAP name="map1"&gt;
 &lt;AREA href="guide.html" 
          alt="Access Guide" 
          shape="rect" 
          coords="0,0,118,28"&gt;
 &lt;AREA href="search.html" 
          alt="Search" 
          shape="rect" 
          coords="184,0,276,28"&gt;
 &lt;AREA href="shortcut.html" 
          alt="Go" 
          shape="circle"
          coords="184,200,60"&gt;
 &lt;AREA href="top10.html" 
          alt="Top Ten" 
          shape="poly" 
          coords="276,0,276,28,100,200,50,50,276,0"&gt;
&lt;/MAP&gt;
</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>
&lt;P&gt;&lt;IMG src="navbar1.gif" usemap="#map1" alt="navigation bar"&gt;
</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>
&lt;P&gt;
&lt;OBJECT data="navbar.png" type="image/png"&gt;
  &lt;OBJECT data="navbar.gif" type="image/gif"&gt;
    <em>text describing the image...</em>
  &lt;/OBJECT&gt;
&lt;/OBJECT&gt;
</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>
&lt;P&gt;
&lt;OBJECT data="navbar.png" type="image/png" usemap="#map1"&gt;
  &lt;OBJECT data="navbar.gif" type="image/gif" usemap="#map1"&gt;
     &lt;MAP name="map1"&gt;
     &lt;P&gt;Navigate the site:
      &lt;A href="guide.html" shape="rect" coords="0,0,118,28"&gt;Access Guide&lt;/a&gt; |
      &lt;A href="shortcut.html" shape="rect" coords="118,0,184,28"&gt;Go&lt;/A&gt; |
      &lt;A href="search.html" shape="circle" coords="184,200,60"&gt;Search&lt;/A&gt; |
      &lt;A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"&gt;Top Ten&lt;/A&gt;
     &lt;/MAP&gt;
  &lt;/OBJECT&gt;
&lt;/OBJECT&gt;
</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>
&lt;MAP name="map1"&gt;
&lt;P&gt;
&lt;A shape="circle" coords="100,200,50"&gt;I'm inactive.&lt;/A&gt;
&lt;A href="outer-ring-link.html" shape="circle" coords="100,200,250"&gt;I'm active.&lt;/A&gt;
&lt;/MAP&gt;
</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>
&lt;P&gt;&lt;A href="http://www.acme.com/cgi-bin/competition"&gt;
        &lt;IMG src="game.gif" ismap alt="target"&gt;&lt;/A&gt;
</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> &nbsp; <a href="../present/styles.html">
next</a> &nbsp; <a href="../cover.html#minitoc">contents</a> &nbsp; <a href= 
"../index/elements.html">elements</a> &nbsp; <a href=
"../index/attributes.html">attributes</a> &nbsp; <a href="../index/list.html">
index</a></div>
</body>
</html>