<!ENTITY % OAlign "(texttop|middle|textmiddle|baseline| textbottom|left|center|right)"> <!ELEMENT OBJECT - - (PARAM | %block)*> <!ATTLIST OBJECT %attrs -- %coreattrs, %i18n, %events -- declare (declare) #IMPLIED -- declare but don't instantiate flag -- classid %URL #IMPLIED -- identifies an implementation -- codebase %URL #IMPLIED -- some systems need an additional URL -- data %URL #IMPLIED -- reference to object's data -- type %ContentType #IMPLIED -- Internet content type for data -- codetype %ContentType #IMPLIED -- Internet content type for code -- standby CDATA #IMPLIED -- message to show while loading -- align %OAlign #IMPLIED -- positioning inside document -- height %Length #IMPLIED -- suggested height -- width %Length #IMPLIED -- suggested width -- border %Length #IMPLIED -- suggested link border width -- hspace %Length #IMPLIED -- suggested horizontal gutter -- vspace %Length #IMPLIED -- suggested vertical gutter -- usemap %URL #IMPLIED -- reference to image map -- shapes (shapes) #IMPLIED -- object has shaped hypertext links -- name %URL #IMPLIED -- submit as part of form -- ÌØ ÐÔ ¶¨ Òå
- codebase = classid Ö¸ ¶¨ µÄ »ù ±¾ · ¾¶ (¾Í ÊÇ Ëµ µ± Îï ¼þ Ðè Òª ´ú Âë µÄ Ê± ºò, Ëü ¸ø ³ö »ù URL). Èç ¹û Õâ ¸ö ÌØ ÐÔ Ã» ÓÐ Ö¸ ¶¨, Ëü µÄ ȱ Ê¡ Öµ ÊÇ µ± Ç° ÎÄ µµ µÄ »ù URL. ²¢ ²» ÊÇ Ëù ÓÐ µÄ äÖ È¾ ½á ¹¹ Ðè Òª Õâ ¸ö ÌØ ÐÔ.
- classid = codetype = [MIMETYPES]), ´Ë ÐΠʽ ÊÇ ÓÉ classid Ö¸ ¶¨ µÄ äÖ È¾ ½á ¹¹. µ± classid ±» Ö¸ ¶¨ ʱ Õâ ¸ö ÌØ ÐÔ ÊÇ ¿É Ñ¡ µÄ ²¢ ÇÒ ÊÇ ½¨ Òé µÄ, Òò Ϊ Ëü ÔÊ Ðí Óà »§ ´ú Àí Æ÷ À´ ±Ü Ãâ µ÷ Èë ²» Ìá ¹© ý Ìå ÐΠʽ. Èç ¹û û ÓÐ ÏÔ Ê½ µØ ¸ø ³ö Õâ ¸ö ÌØ ÐÔ µÄ Öµ, Ëü Ôò ȱ Ê¡ Ϊ data = type = data ˵ Ã÷ µÄ Êý ¾Ý »¥ Áª Íø ý Ìå ÐΠʽ (Internet Media Type, ²Î ¼û data ±» Ö¸ ¶¨ ʱ Ëü ÊÇ ¿É Ñ¡ µÄ ²¢ ÇÒ ÊÇ ½¨ Òé µÄ, Òò Ϊ Ëü ÔÊ ÐíÓà »§ ´ú Àí Æ÷ ±Ü Ãâ µ÷ Èë ²» Ìá ¹© µÄ ý Ìå ÐΠʽ. Èç ¹û Õâ ¸ö ÌØ ÐÔ Öµ û ÓÐ ±» ÏÔ Ê½ µØ ¸ø ³ö, Óà »§ ´ú Àí Æ÷ ×Ô ÐÐ ÅÐ ¶Ï ±» äÖ È¾ µÄ Êý ¾Ý ÐΠʽ.
- declare
- ÔÚ ÏÔ Ê¾ µÄ ʱ ºò, Õâ ¸ö ²¼ ¶û ÌØ ÐÔ Ê¹ Ö» ʹ Óà µ± Ç° OBJECT µÄ Éù Ã÷. Îï ¼þ ±Ø Ðë Á¢ ¼´ ±» ºó À´ µÄ OBJECT ¶¨ Òå Ö¸ Ã÷.
- standby = align = texttop|middle|textmiddle|baseline|textbottom|left|center|right
- ²» ÔÞ ³É. Õâ ¸ö ÌØ ÐÔ Ö¸ ¶¨ ÁË Îï ¼þ µÄ λ Öà ÒÔ ¼° Χ ÈÆ µÄ ÉÏ Ï Òé. Ëü ¿É ÄÜ µÄ Öµ ÔÚ Ìؼþ¶ÔÆ뷽ʽ ÖÐ ±» ¶¨ Òå.
ÔÚ Ëü ´¦ ¶¨ Òå µÄ ÌØ ÐÔ´ó ¶à Êý Óà »§ ´ú Àí Æ÷ °ü º¬ ¶Ô ³£ ¹æ Êý ¾Ý ÐΠʽ Èç ÎÄ ±¾, GIF ͼ Ïñ, ÑÕ É«, ×Ö Ìå ºÍ ¿É ¿Ø ͼ Ïñ Ôª ËØ µÄ äÖ È¾ ЊϢ. Ϊ ÁË äÖ È¾ Ëü ÃÇ Ìì Éú ²» Ìá ¹© µÄ Êý ¾Ý ÐΠʽ, Óà »§ ´ú Àí Æ÷ ͨ ³£ ÔË ÐÐ Íâ ²¿ ³Ì ʽ. OBJECT Ôª ËØ ÔÊ Ðí ×÷ Õß À´ ¿Ø ÖÆ Óà »§ ´ú Àí Æ÷ ÔÚ ÄÚ ¿Í »¹ ÊÇ Íâ ²¿ ´¦ Àí °ü º¬ µÄ Îï ¼þ.
- id, class (¹ã·ºµÄÎĵµ±êʶ·û)
- lang (ÓïÑÔÐÅÏ¢), dir (ÎÄ×Ö·½Ïò)
- title (ÔªËرêÌâ)
- ÄÚ²ã·ç¸ñÐÅÏ¢)
- ondblclick, onmouseup, onmousemove, onkeypress, onkeyup (tabindex (shapes, usemap (¿Í»§¶ËͼÏñÓ³Ïñ)
- name (border, hspace, vspace (Îï¼þ, ͼÏñºÍСÔËÐи÷ÐòµÄ¿ÉÊÓÕ¹ÏÖ)
ÔÚ ´ó ¶à Êý ͨ ³£ µÄ Çé ¿ö ÏÂ, Ò» ¸ö ²å Èë µÄ äÖ È¾ ½á ¹¹ Ö¸ ¶¨ ÁË ÐŠϢ µÄ Èý ÖÖ ÐΠʽ:
ÔÚ Ò» ¶¨ µÄ Çé ¿ö ÏÂ, Ëü ÎÞ Ðè Ö¸ ¶¨ Ëù ÓÐ µÄ Õâ Щ ÐŠϢ. Àý Èç, ij Щ äÖ È¾ ½á ¹¹ ¿É ÄÜ ²» Ðè Òª Êý ¾Ý (Èç °ü º¬ С ÔË ÐÐ ³Ì ʽ µÄ С ¶¯ »). Æä Ëü äÖ È¾ ½á ¹¹ ²¢ ²» Ðè Òª ÔË ÐРʱ ³õ ʼ »¯. ×î ºó, ij Щ äÖ È¾ ½á ¹¹ ²¢ ²» Ðè Òª ¶î Íâ µÄ Ö´ ÐРЊϢ, ¾Í ÊÇ Ëµ Óà »§ ´ú Àí Æ÷ ×Ô ÐÐ ¿É ÄÜ ÒÑ ¾ Öª Ïþ Èç ºÎ À´ äÖ È¾ Õâ Щ ý Ìå ÐΠʽ (Èç GIF ͼ Ïñ).
- äÖ È¾ ½á ¹¹ µÄ ¹á ³¹
- ±» äÖ È¾ µÄ Êý ¾Ý
- ÔÚ äÖ È¾ ½á ¹¹ ÔË ÐРʱ Ðè Òª µÄ ¶î Íâ Öµ.
ÔÚ HTML ÖÐ, OBJECT Ôª ËØ Ö¸ ¶¨ ÁË äÖ È¾ ½á ¹¹ µÄ λ Öà ÒÔ ¼° äÖ È¾ ½á ¹¹ Ðè µÄ Êý ¾Ý µÄ λ ÖÃ. Õâ Щ ÌØ ÐÔ Í¨ ¹ý OBJECT Ôª ËØ µÄ ЊϢ À´ Ö¸ ¶¨. PARAM Ôª ËØ Ö¸ Ò» ¸ö ¶¯ ÐР̬ Öµ µÄ ¼¯. ÎÒ ÃÇ ÔÚ ºó Ãæ ÑÐ ¾¿ Õâ ¸ö Ôª ËØ, ÔÚ Îï¼þ³õʼ»¯ ²¿ ·Ö.
Ò» ¸ö Óà »§ ´ú Àí Æ÷ ±Ø Ðë ¸ù ¾Ý Ï ÁÐ µÄ ÓÅ ÏÈ È¨ ·¨ Ôò À´ ½â Òë OBJECT Ôª ËØ:
- Óà »§ ´ú Àí Æ÷ ±Ø Ðë Ê× ÏÈ ³¢ ÊÔ Ôª ËØ ÌØ ÐÔ ¶¨ Òå µÄ ½á ¹¹.
- ²» ¹Ü ʲ ô Ô Òò Èç ¹û Óà »§ ´ú Àí Æ÷ ²» ÄÜ äÖ È¾ Õâ ¸ö ½á ¹¹ (û ÓÐ Éè ÖÃ, ×Ê Ô´ ȱ ·¦ ÒÔ ¼° ´í Îó ½¨ ¹¹), µ« Ëü ±Ø Ðë ³¢ ÊÔ äÖ È¾ Ôª ËØ ÄÚ ÈÝ.
ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ, ÎÒ ÃÇ ²å Èë ÁË Ò» ¸ö Ðé ¹¹ µÄ ÒÔ Python (´ó òþ) Óï ÑÔ Ð´ µÄ äÖ È¾ ½á ¹¹ À´ ÏÔ Ê¾ Ò» ¸ö µç ÄÔ Ê± ÖÓ. Õâ ¸ö ¿É ͨ ÐÐ ³Ì ʽ ÎÞ Ðè ¶î Íâ µÄ Êý ¾Ý ºÍ ÔË ÐР̬ Öµ. classid ÌØ ÐÔ Ö¸ ¶¨ С ÔË ÐÐ ³Ì ʽ µÄ λ ÖÃ:Ò» ¸ö OBJECT Ôª ËØ ¶¨ Òå µÄ ÖØ Òª Ó° Ïì ÊÇ Ö¸ Ã÷ ½» »¥ Îï ¼þ µÄ äÖ È¾ ½á ¹¹; ÿ ¸ö °ó ¶¨ µÄ OBJECT Éù Ã÷ Ö¸ ¶¨ Ò» ¸ö ½» »¥ äÖ È¾ ½á ¹¹. Èç ¹û Ò» ¸ö Óà »§ ´ú Àí Æ÷ ÎÞ ·¨ äÖ È¾ Ò» ¸ö Íâ ²¿ OBJECT, Ëü ³¢ ÊÔ äÖ È¾ Ëü µÄ ÄÚ ÈÝ, ¿É ÒÔ ÊÇ Áí Ò» ¸ö OBJECT Ôª ËØ µÈ.<OBJECT classid="http://www.miamachina.it/analogclock.py"> </OBJECT>ÎÒ ÃÇ ½¨ Òé ͨ ¹ý °ü º¬ OBJECT ÄÚ ÈÝ ÖÐ µÄ ½» »¥ ÎÄ ×Ö À´ Íê ³É Õâ ¸ö Éù Ã÷. ´Ë Àý ÖÐ Óà »§ ´ú Àí Æ÷ ÎÞ ·¨ äÖ È¾ Õâ ¸ö ÖÓ.<OBJECT classid="http://www.miamachina.it/analogclock.py"> An animated clock. </OBJECT>×¢ Òâ Óà »§ ´ú Àí Æ÷ ½« ÔÚ ½â Òë OBJECT Éù Ã÷ µÄ ͬ ʱ äÖ È¾ Õâ ¸ö ÖÖ. ÔÚ Îï ¼þ µÚ Ò» ´Î Éù Ã÷ ʱ äÖ È¾ ½á ¹¹ ¿É ÄÜ »á ÑÓ ³Ù (ÔÚ Ï Ãè Êö).ÔÚ Ï Ãæ µÄ Àý ³Ì ÖÐ, ÎÒ ÃÇ Ç¶ Èë Êý ¸ö OBJECT Éù Ã÷ À´ ¾Ù Àý ˵ Ã÷ äÖ È¾ ¹¤ ×÷. Óà »§ ´ú Àí Æ÷ ½« ³¢ ÊÔ äÖ È¾ Ëü ÄÜ ¹» µÄ µÚ Ò» ¸ö OBJECT Ôª ËØ, ͨ ¹ý Ï Ãæ µÄ ´Î Ðò: (1) Ò» ¸ö Óà Python (´ó òþ) Óï ÑÔ Ð´ µÄ µØ Çò С ÔË ÐÐ ³Ì ʽ, (2) Ò» ¸ö µØ Çò µÄ MPEG ¶¯ », (3) Ò» ¸ö µØ Çò µÄ GIF ͼ Ïñ, (4) ½» »¥ ÎÄ ±¾<OBJECT title="The Earth as seen from space" classid="http://www.observer.mars/TheEarth.py"> <OBJECT data="TheEarth.mpeg" type="application/mpeg"> <OBJECT src="TheEarth.gif"> The <STRONG>Earth</STRONG> as seen from space. </OBJECT> </OBJECT> </OBJECT>Íâ ²¿ Éù Ã÷ Ö¸ ¶¨ Ò» ¸ö С ÔË ÐÐ ³Ì ʽ ²» Ðè Òª Êý ¾Ý ºÍ ³õ ʼ Öµ. µÚ ¶þ ¸ö Éù Ã÷ Ö¸ Ã÷ Ò» ¸ö MPEG µç Ó° ²¢ ÇÒ ÓÉ ÓÚ Ã» ÓÐ ¶¨ Òå Ò» ¸ö äÖ È¾ ½á ¹¹, Ëü ÒÀ ¿¿ Óà »§ ´ú Àí Æ÷ À´ ´¦ Àí Õâ ¸ö ¶¯ ». ÎÒ ÃÇ »¹ Éè Öà ÁËÄÚ ²ã Óë Íâ ²¿ Êý ¾Ý µÄ ±È ½Ï. ±» äÖ È¾ µÄ Êý ¾Ý ¿É ÒÔ Í¨ ¹ý Á½ ÖÖ Í¾ ¾¶ À´ Ö¸ ¶¨: ÄÚ ²ã ºÍ ºÍ À´ ×Ô ÓÚ Íâ ²¿ ×Ê Ô´ µÄ. ÐÎ ³É ·½ ·¨ ͨ ³£ ½« Òý Æð ¸ü ¿ì ËÙ µÄ äÖ È¾, µ« ÔÚ äÖ È¾ ´ó Á¿ Êý ¾Ý ʱ È´ ÊÇ ²» Ïà ÒË µÄ.Îï¼þ³õʼ»¯: PARAM ÔªËØ
<!ELEMENT PARAM - O EMPTY -- named property value --> <!ATTLIST PARAM name CDATA #REQUIRED -- property name -- value CDATA #IMPLIED -- property value -- valuetype (DATA|REF|OBJECT) DATA -- How to interpret value -- type CDATA #IMPLIED -- Internet media type -- >¿ª ʼ ±ê ¼Ç: Ðè Òª, ½á Êø ±ê ¼Ç: ½û Ö¹ÌØ ÐÔ ¶¨ Òå
- name = value = valuetype = data|ref|object
- Õâ ¸ö ÌØ ÐÔ Ö¸ ³ö value ÌØ ÐÔ µÄ ÐΠʽ. ¿É ÄÜ µÄ Öµ Ϊ:
- data: Õâ ¸ö ÓÉ value ˵ Ã÷ µÄ Öµ ÔÚ ½â ¾ö ÁË ÈÎ ºÎ µÄ °ó ¶¨ ×Ö ·û ºÍ Êý ×Ö ×Ö ·û ºó ½« Ö± ½Ó ×÷ Ϊ Ò» ¸ö ×Ö ·û ´® ´« ËÍ ¸ø äÖ È¾ »ú ÖÆ. Õâ ÊÇ Õâ ¸ö ÌØ ÐÔ µÄ ȱ Ê¡ Öµ ²¢ ¿É ÄÜ ³ö ÏÖ ÔÚ Ôª ËØ µÄ ¿ª ʼ ±ê ¼Ç ÖÐ.
- ref: Õâ ¸ö ÓÉ value Ö¸ ¶¨ µÄ Öµ ÊÇ Ò» ¸ö URL, Ëü Ö¸ Ã÷ ÁË Ò» ¸ö ×Ê Ô´ µÄ ¶¯ ÐР̬ Öµ ´æ ·Å ÔÚ ÄÄ Àï. Õâ ¸ö URL ±Ø Ðë ²» ±ä µØ ´« ËÍ ¸ø äÖ È¾ ½á ¹¹, ¾Í ÊÇ Ëµ û ÓÐ ¾ö ¶¨ ¹ý.
- object: Õâ ¸ö ÓÉ Éù Ã÷ µÄ Öµ ÊÇ Ò» ¸ö URL Ƭ ¶Ï ²¢ ÓÉ OBJECT Éù Ã÷ ÔÚ Í¬ Ò» ƪ ÎÄ µµ ÖÐ Éè ¶¨. ÔÚ ´Ë Àý ÖÐ, OBJECT ¶¨ Òå ±Ø Ðë ÒÔ Ëü µÄ id ÌØ ÐÔ ±ê ʶ.
- type = valuetype Ö» ÓÐ ÔÚ ÌØ ÐÔ ±» ¶¨ Òå Ϊ "ref" ʱ, ´Ë ÌØ ÐÔ Ö¸ ¶¨ ÁË ÓÉ value ÌØ ¶¨ Ö¸ ×Ê Ô´ µÄ »¥ Áª Íø ý Ìå ÐΠʽ (²Î ¼û
ÎÒ ÃÇ »Ø µ½ ÎÒ ÃÇ µÄ ÖÓ Àý ³Ì. Õâ ´Î, ÎÒ ÃÇ ¼Ù ¶¨ äÖ È¾ »ú ÖÆ (ÖÓ) ÄÜ ¹» ´¦ Àí Á½ ¸ö ¶¨ Òå ³õ ʼ ¸ß ¶È ºÍ ¿í ¶È µÄ ÔË ÐР̬ ²Î Êý. ÎÒ ÃÇ Í¨ ¹ý ³õ ʼ µÄ Á½ ¸ö PARAM Ôª ËØ À´ Éè ¶¨ Ò» ¸ö 40x40 µÄ ³¤ ·½ ÐÎ.<OBJECT classid="http://www.miamachina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> This user agent cannot render Python apps. </OBJECT>Since the default valuetype for a PARAM element is "data", we could replace the above declarations with either:<PARAM name="height" value="40"> <PARAM name="width" value="40" >or:<PARAM name="height" value="40" data> <PARAM name="width" value="40" data>(The latter form -- the value "data" only for valuetype attribute -- is possible due to the DTD definition of this attribute.)In the following example, run-time data for the rendering mechanism's "Init_values" parameter is specified as an external resource (a GIF file). The value of the valuetype attribute is thus set to "ref", and the value is a URL designating the resource.Rendering mechanisms are located by URLs. As we discussed in the section on URLs, the first segment of an absolute URL specifies the protocol used to transfer the data designated by the URL. For HTML documents, this protocol is generally "http". Some rendering mechanisms might employ other protocols. For instance, when specifying a Java rendering mechanism, you may use URLs that begin with "java" and for ActiveX applets, you may use "clsid".<OBJECT classid="http://www.gifstuff.com/gifappli" standby="Loading Elvis..."> <PARAM name="Init_values" value="./images/elvis.gif"> valuetype="ref"> </OBJECT>Note that we have also set the standby attribute so that the user agent may render a message while the rendering mechanism loads.In the following example, we insert a Java applet into an HTML document.<OBJECT classid="java:program.start"> </OBJECT>By setting the codetype attribute, a user agent can decide whether to retrieve the Java application based on its ability to do so.<OBJECT codetype="application/octet-stream" classid="java:program.start"> </OBJECT>Some rendering schemes require additional information to identify their implementation and must be told where to find that information. You may give path information to the rendering mechanism via the codebase attribute.<OBJECT codetype="application/octet-stream" classid="java:program.start"> codebase="http://foooo.bar.com/java/myimplementation/" </OBJECT>The following example specifies (with the classid attribute) an ActiveX rendering mechanism via a URL that begins with the protocol information "clsid". The data attribute locates the data to render (another clock).<OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="http://www.acme.com/ole/clock.stm"> This application is not supported. </OBJECT>Object declarations and instantiations
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:To declare an rendering mechanism so that it is not executed when read by the user agent, set the boolean declare attribute in the OBJECT element. At the same time, you must identify the declaration by setting the id attribute in the OBJECT element to a unique value. Later instantiations of the object will refer to this identifier.
- Data may be retrieved from the network by the user agent one time (during the declaration) and reused for each instantiation.
- It is possible to instantiate an object from a different location in the document, for example, by activating a link.
- It is possible to specify objects as run-time data for other objects.
A rendering mechanism defined with the declare attribute is instantiated every time the OBJECT is referenced thereafter.
In the following example, we declare an OBJECT and cause it so be instantiated by referring to it from a link. Thus, the object can be activated by clicking on some highlighted text, for example.<OBJECT declare id="earth_declaration" data="TheEarth.mpeg" type="application/mpeg"> <OBJECT src="TheEarth.gif"> The <STRONG>Earth</STRONG> as seen from space. </OBJECT> </OBJECT> ...later in the document... Click to see a neat <A href="#earth_declaration"> animation of The Earth!</A>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 rendering mechanism 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 id "tribune" to the font object declaration and (2) referring to it from the PARAM element of the poem viewer object (with valuetype and value).User agents that don't support the declare attribute must render the contents of the OBJECT declaration.<OBJECT declare id="tribune" type="application/x-webfont" data="tribune.gif"> </OBJECT> ...view the poem in KublaKhan.txt here... <OBJECT classid="http://foo.bar.com/poem_viewer" data="KublaKhan.txt"> <PARAM name="font" valuetype="object" value="#tribune"> <P>You're missing a really cool poem viewer ... </OBJECT>Object alignment
The align attribute has been deprecated for this element in favor of style sheets.The align attribute specifies the position of an object with respect to its context.
The following values place an object in the heart of text:
Three other values, left, center, and right, cause an object to float. They are discussed in the section on Including an image: the IMG element
- texttop: means the top of the object should be vertically aligned with the top of the current text line.
- middle: means the middle of the object should be vertically aligned with the current baseline.
- textmiddle: means the middle of the object should be vertically aligned with the position midway between the baseline and the x-height for the current font. The x-height is defined as the top of a lower case x in Western writing systems. If the text font is an all-caps style, user agents should use the height of a capital X. For other writing systems, user agents should align the middle of the object with the middle of the text.
- baseline: means the bottom of the object should be vertically aligned with the current baseline.
- textbottom: means the bottom of the object should be vertically aligned with the bottom of the current text line.
<!-- To avoid problems with text-only UAs you need to provide a description with ALT, and avoid server-side image maps --> <!ELEMENT IMG - O EMPTY -- Embedded image --> <!ATTLIST IMG %attrs; -- %coreattrs, %i18n, %events -- src %URL #REQUIRED -- URL of image to embed -- alt CDATA #IMPLIED -- description for text only browsers -- align %IAlign #IMPLIED -- vertical or horizontal alignment -- height %Pixels #IMPLIED -- suggested height in pixels -- width %Pixels #IMPLIED -- suggested width in pixels -- border %Pixels #IMPLIED -- suggested link border width -- hspace %Pixels #IMPLIED -- suggested horizontal gutter -- vspace %Pixels #IMPLIED -- suggested vertical gutter -- usemap %URL #IMPLIED -- use client-side image map -- ismap (ismap) #IMPLIED -- use server-side image map -- >Start tag: required, End tag: forbiddenAttribute definitions
- src = align = bottom|middle|top|left|right
- Deprecated. This attribute specifies the position of the image with respect its surrounding context. Its values are explained in the section on image alignment.
Attributes defined elsewhereThe IMG element embeds an image in the current document at the location of the element's definition. However, we recommend using the OBJECT element to insert an image into a document.
- id, class (document-wide identifiers)
- alt (alternate text)
- lang (language information), dir (text direction)
- title (element titles)
- style (inline style information)
- onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
- ismap, usemap (client side image maps)
- name (border, hspace, vspace (visual presentation of objects, images, and applets)
The height and width attributes of this element override the natural height and width of the source image. User agents should scale the image appropriately.
In an earlier example, we defined a link to a family photo. Here, we insert the photo directly into the current documentThe alt attribute specifies alternate text when the image cannot be displayed (see below for information on how to specify alternate text )....preceding text... I just returned from vacation! Here's a photo of my family at the lake: <IMG src="http://www.somecompany.com/People/Ian/vacation/family.png" alt="A photo of my family at the lake.">This may be expressed with the OBJECT element as follows:...preceding text... I just returned from vacation! Here's a photo of my family at the lake: <OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png" type="image/png"> A photo of my family at the lake. </OBJECT>Image alignment
The align attribute has been deprecated for this element in favor of style sheets.The align attribute specifies the position of an object with respect to its context.
The following values place an object in the heart of text:
Two other values, left and right, cause the image to float. They are discussed in the section on Differing interpretations of align. Existing user agents vary in their interpretation of the align 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.
- bottom: means that the bottom of the image should be vertically aligned with the current baseline. This is the default value.
- middle: means that the center of the image should be vertically aligned with the current baseline.
- top: means that the top of the image should be vertically aligned with the top of the current text line.
Including an applet: the APPLET element
APPLET is deprecated.<!ELEMENT APPLET - - (PARAM | %inline)*> <!ATTLIST APPLET codebase %URL #IMPLIED -- optional base URL for applet -- archive CDATA #IMPLIED -- comma separated archive list -- code CDATA #IMPLIED -- applet class file -- object CDATA #IMPLIED -- serialized applet file -- alt CDATA #IMPLIED -- description for text only browsers -- name CDATA #IMPLIED -- allows applets to find each other -- width %Pixels #REQUIRED -- suggested width in pixels -- height %Pixels #REQUIRED -- suggested height in pixels -- align %IAlign #IMPLIED -- vertical or horizontal alignment -- hspace %Pixels #IMPLIED -- suggested horizontal gutter -- vspace %Pixels #IMPLIED -- suggested vertical gutter -- >Start tag: required, End tag: requiredAttribute definitionsThis element, supported by all Java-enabled browsers, allows designers to embed a Java applet in an HTML document. It has been deprecated in favor of the OBJECT element.
- codebase = code = name = width = height = align = bottom|middle|top|left|right
- This attribute specifies the position of the object with respect to its surrounding context. Its values are explained in the section on image alignment.
- archive = codebase. Preloading resources can significantly improve the performance of applets.
- object = Attributes defined elsewhere
- alt (alternate text)
- hspace, vspace (visual presentation of objects, images, and applets)
The content of the APPLET acts as alternate information for user agents that don't support this element or are currently configured not to support applets. The content must be ignored otherwise.
The following sample Java applet:Initial values may be supplied to the applet via the PARAM element.<APPLET code="Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </APPLET>may be rewritten as follows with OBJECT:<OBJECT codetype="application/octet-stream" classid="java:Bubbles.class" width="500" height="500"> Java applet that draws animated bubbles. </OBJECT>The following sample Java applet:<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </APPLET>may be rewritten as follows with OBJECT:<OBJECT codetype="application/octet-stream" classid="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Java applet that plays a welcoming sound. </OBJECT>Including HTML in another HTML document
Sometimes, rather than linking to another document, it is helpful to include the contents of an HTML document in another HTML document. We recommend using the OBJECT element with the data attribute for this purpose.For instance, the following line will include the contents of piece_to_include.html at the location where the OBJECT definition occurs.The behavior of a user agent in cases where a file includes itself is not defined....text before... <OBJECT data="file_to_include.html"> Warning: file_to_include.html could not be included. </OBJECT> ...text after...The contents of OBJECT must only be rendered if the file specified by the data attribute cannot be loaded.Careful file inclusions. Be careful if you attempt to include a section of an HTML document defined by an anchor. The entire document after the anchor definition will be included, and you might unwittingly include unwanted end tags (for elements such as BODY, HTML, etc.) in your document.The IFRAME element may also be used to insert an inline frame containing text in an HTML document.Including an image map in an HTML document
An image map allows users authors to specify active regions of an image or object and assign a specific action to each region (e.g., retrieve a document, run a program, etc.)An image map is created by associating an object with a specification of sensitive geometric areas on the object.
There are two types of image maps:
Client-side image maps are preferred over server-side image maps. It is possible to implement client-side image maps with several elements.
- Server-side. 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 where the document is housed. The server interprets the coordinates and performs some action.
- Client-side. 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.
Non-graphical representation of image maps. Non-graphical user agents may render client-side image maps as sets of textual links. The textual region may be activated by keyboard input.Client-side image maps
The following attributes are defined for several elements (A and AREA). They allow authors to specify a set of geometrical regions and associate URLs with them.Attribute definitions
- shape = default|rect|circle|poly
- This attribute specifies the shape of a region. Possible values:
- default: Specifies the entire region.
- rect: Define a rectangular region.
- circle: Define a circular region.
- poly: Define a polygonal region.
- coords = length-list
- This attribute specifies the position a shape on the screen. The number and order of values depends on the shape being defined. Possible combinations:
Coordinates are relative to the top, left corner of the object. All values are OBJECT element.
- rect: left-x, top-y, right-x, bottom-y.
- circle: center-x, center-y, radius.
- poly: x1, y1, x2, y2, ..., xN, yN.
Attribute definitions
- shapes
- When set, this boolean attribute specifies that the object being defined is an image map. The contents of the OBJECT element will specify the active regions.
In the following example, we create a client-side image map for the OBJECT element by associating URLs with regions specified by a series of A elements.If the OBJECT element includes a shapes attribute, user agents must parse the contents of the element to look for anchors.<OBJECT data="navbar.gif" shapes> <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> | <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> | <A href="search.html" shape="circ" coords="184,200,60">Search</A> | <A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A> </OBJECT>If two or more defined regions overlap, the region defined first takes precedence (i.e., responds to user input).
Client-side image maps with MAP and AREA
The MAP and AREA elements provide an alternate mechanism for client side image maps.<!ELEMENT MAP - - (AREA)*> <!ATTLIST MAP %coreattrs; -- id, class, style, title -- name CDATA #IMPLIED >Start tag: required, End tag: required<!ELEMENT AREA - O EMPTY> <!ATTLIST AREA shape %Shape rect -- controls interpretation of coords -- coords %Coords #IMPLIED -- comma separated list of values -- href %URL #IMPLIED -- this region acts as hypertext link -- target CDATA #IMPLIED -- where to render linked resource -- nohref (nohref) #IMPLIED -- this region has no action -- alt CDATA #REQUIRED -- description for text only browsers -- tabindex NUMBER #IMPLIED -- position in tabbing order -- >Start tag: required, End tag: forbiddenAttribute definitionsAttributes defined elsewhereSeveral elements (OBJECT, IMG, and INPUT) allow the following attribute to specify an associated client-side image map.
- id, class (document-wide identifiers)
- lang (language information), dir (text direction)
- title (element titles)
- style (inline style information)
- name (alt (alternate text)
- href ( anchor reference) target (frame target information)
- tabindex (tabbing navigation)
- accesskey (access keys)
- shape, coords (image maps)
We can rewrite the previous example in terms of MAP and AREA. We still create an OBJECT that will insert an image. We associate the object and the image map by setting the usemap attribute on the OBJECT and the name attribute of the MAP element to the same value.<OBJECT data="navbar1.gif" usemap="#map1"></OBJECT> <MAP name="map1"> <AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28"> <AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28"> <AREA href="shortcut.html" alt="Go" shape=circ coords="184,200,60"> <AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,373,28,50,50,276,0"> </MAP>The alt attribute specifies alternate text for cases when the image map may not be displayed (see below for information on how to specify alternate text).Note: MAP is not backwards compatible with HTML 2.0 user agents.Server-side image maps
Server-side image maps may be interesting in cases where the image map is too complicated for a client-side image map.It is only possible to define a server-side image map with the IMG element. To do so, set the boolean attribute ismap in the IMG definition. The associated map of regions must be specified with the usemap attribute.
When the user activates a region of the image map, the screen coordinates are sent directly to the server where the document resides. Screen coordinates are expressed as screen pixel values. For normative information about the definition of a pixel and how to scale it, please consult [CSS1].
The location clicked is passed to the server as follows. The user agent derives a new URL from the URL specified by the href attribute by appending `?' followed by the x and y coordinates, separated by a comma. The link is then followed using the new URL. For instance, in the previous example, if the user clicks at at the location x=10, y=27 then the derived URL is "/cgibin/navbar.map?10,27".
In the following example, the first active region defines a client-side link. The second defines a server-side link, but doesn't assign a specific shape to it (this is accomplished with the "default" value of the shape attribute). Since the regions of the two links overlap, the first takes precedence of the later definition. Thus, a click anywhere but in the rectangle will cause the click's coordinates to be sent to the server.<OBJECT data="game.gif" shapes> <A href="guide.html" shape="rect" coords="0,0,118,28"> Rules of the Game</A> <A href="http://www.acme.com/cgi-bin/competition" ismap shape="default"> Guess the location</a> </OBJECT>Visual presentation of images, objects, and applets
All IMG and OBJECT attributes that concern visual alignment or presentation have been deprecated in favor of style sheets.The height and width 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. Both attributes take values of type length.
Images or objects that are the content of an A element are sometimes surrounded by a border. The border attribute specifies the width of this border.
How to specify alternate text
Attribute definitionsSeveral non-textual elements (IMG, AREA, APPLET, and INPUT) allow authors to 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.
- alt = lang attribute.
While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:
The alt attribute is mandatory for the AREA element, but optional for IMG, APPLET, and INPUT.
- Do not specify meaningless alternate text when including images intended to format a page. In this case, the alternate text should be the empty string (""). In any case, authors should not use images to format pages; style sheets should be used instead.
- 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.
When an author does not set the alt attribute for the IMG or APPLET elements, user agents should supply the alternate text, calculated in the following order:
When an author does not set the alt attribute for the INPUT element, user agents should supply the alternate text, calculated in the following order:
- If the title has been specified, its value should be used as alternate text.
- Otherwise, if HTTP headers provide title information when the included object is retrieved, this information should be used as alternate text.
- Otherwise, if the included object contains text fields (e.g., GIF images contain some text fields), information extracted from the text fields should be used as alternate text. Since user agents may have to retrieve an entire object first in order to extract textual information, user agents may adopt more economical approaches (e.g., content negotiation).
- Otherwise, in the absence of other information, user agents should use the file name (minus the extension) as alternate text.