Introduction to objects, images, and applets Including an image: the IMG element Generic inclusion: the OBJECT element Rules for rendering objects Object initialization: the PARAM element Global naming schemes for objects Object declarations and instantiations Including an applet: the APPLET element Notes on embedded documents Image maps Client-side image maps: the MAP and AREA elements Client-side image map examples Server-side image maps Visual presentation of images, objects, and applets Width and height White space around images and objects Borders Alignment How to specify alternate text 13.1 Introduction to objects, images, and applets 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. For example, to include a PNG image in a document, authors may write:
Here's a closeup of the Grand Canyon: Previous versions of HTML allowed authors to include images (via IMG) and applets (via APPLET). These elements have several limitations: They fail to solve the more general problem of how to include new and future media types. The APPLET element only works with Java-based applets. This element is deprecated in favor of OBJECT. They pose accessibility problems. To address these issues, HTML 4 introduces the OBJECT element, which offers an all-purpose solution to generic object inclusion. The OBJECT 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. The new OBJECT element thus subsumes some of the tasks carried out by existing elements. Consider the following chart of functionalities: Type of inclusion Specific element Generic element Image IMG OBJECT Applet APPLET (Deprecated.) OBJECT Another HTML document IFRAME OBJECT The chart indicates that each type of inclusion has a specific and a general solution. The generic OBJECT element will serve as the solution for implementing future media types. To include images, authors may use the OBJECT element or the IMG element. To include applets, authors should use the OBJECT element as the APPLET element is deprecated. To include one HTML document in another, authors may use either the new IFRAME element or the OBJECT 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 notes on embedded documents for a comparison of OBJECT and IFRAME for document inclusion. Images and other included objects may have hyperlinks associated with them, both through the standard linking mechanisms, but also via image maps. 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. In the following sections, we discuss the various mechanisms available to authors for multimedia inclusions and creating image maps for those inclusions. 13.2 Including an image: the IMG element Start tag: required, End tag: forbidden Attribute definitions src = uri [CT] This attribute specifies the location of the image resource. Examples of widely recognized image formats include GIF, JPEG, and PNG. longdesc = uri [CT] This attribute specifies a link to a long description of the image. This description should supplement the short description provided using the alt attribute. When the image has an associated image map, this attribute should provide information about the image map's contents. This is particularly important for server-side image maps. Since an IMG element may be within the content of an 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 href resource of the latter. name = cdata [CI] This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements. Attributes defined elsewhere id, class (document-wide identifiers) alt (alternate text) lang (language information), dir (text direction) title (element title) style (inline style information) onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events) ismap, usemap (client side image maps) align, width, height, border, hspace, vspace (visual presentation of objects, images, and applets) The IMG element embeds an image in the current document at the location of the element's definition. The IMG element has no content; it is usually replaced inline by the image designated by the src attribute, the exception being for left or right-aligned images that are "floated" out of line. In an earlier example, we defined a link to a family photo. Here, we insert the photo directly into the current document:
I just returned from vacation! Here's a photo of my family at the lake:
This inclusion may also be achieved with the OBJECT element as follows:
I just returned from vacation! Here's a photo of my family at the lake: The alt attribute specifies alternate text that is rendered when the image cannot be displayed (see below for information on how to specify alternate text ). 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. The following example shows how the longdesc attribute can be used to link to a richer description:
The alt 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 longdesc attribute to the longer description, here "sitemap.html".
Please consult the section on the visual presentation of objects, images, and applets for information about image size, alignment, and borders.
13.3 Generic inclusion: the OBJECT element
Start tag: required, End tag: required
Attribute definitions
classid = uri [CT]
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 data attribute, depending on the type of object involved.
codebase = uri [CT]
This attribute specifies the base path used to resolve relative URIs specified by the classid, data, and archive attributes. When absent, its default value is the base URI of the current document.
codetype = content-type [CI]
This attribute specifies the content type of data expected when downloading the object specified by classid. This attribute is optional but recommended when classid 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 type attribute.
data = uri [CT]
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 codebase attribute.
type = content-type [CI]
This attribute specifies the content type for the data specified by data. This attribute is optional but recommended when data 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.
archive = uri-list [CT]
This attribute may be used to specify a space-separated list of URIs for archives containing resources relevant to the object, which may include the resources specified by the classid and data attributes. Preloading archives will generally result in reduced load times for objects. Archives specified as relative URIs should be interpreted relative to the codebase attribute.
declare [CI]
When present, this boolean attribute makes the current OBJECT definition a declaration only. The object must be instantiated by a subsequent OBJECT definition referring to this declaration.
standby = text [CS]
This attribute specifies a message that a user agent may render while loading the object's implementation and data.
Attributes defined elsewhere
id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
tabindex (tabbing navigation)
usemap (client side image maps)
name (form submission)
align, width, height, border, hspace, vspace (visual presentation of objects, images, and applets)
Most user agents have built-in mechanisms 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 OBJECT 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.
In the most general case, an author may need to specify three types of information:
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.
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.
Additional values required by the object at run-time. For example, some applets may require initial values for parameters.
The OBJECT 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).
Authors specify an object's implementation and the location of the data to be rendered via the OBJECT element. To specify run-time values, however, authors use the PARAM element, which is discussed in the section on object initialization.
The OBJECT element may also appear in the content of the HEAD element. Since user agents generally do not render elements in the HEAD, authors should ensure that any OBJECT elements in the HEAD do not specify content that may be rendered. Please consult the section on sharing frame data for an example of including the OBJECT element in the HEAD element.
Please consult the section on form controls for information about OBJECT elements in forms.
This document does not specify the behavior of OBJECT elements that use both the classid attribute to identify an implementation and the data attribute to specify data for that implementation. In order to ensure portability, authors should use the PARAM element to tell implementations where to retrieve additional data.
13.3.1 Rules for rendering objects
A user agent must interpret an OBJECT element according to the following precedence rules:
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 PARAM elements (see object initialization) or MAP elements (see client-side image maps).
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.
Authors should not include content in OBJECT elements that appear in the HEAD element.
In the following example, we insert an analog clock applet in a document via the OBJECT element. The applet, written in the Python language, requires no additional data or run-time values. The classid attribute specifies the location of the applet:
Note that the clock will be rendered as soon as the user agent interprets this OBJECT declaration. It is possible to delay rendering of an object by first declaring the object (described below). Authors should complete this declaration by including alternate text as the contents of OBJECT in case the user agent cannot render the clock.
One significant consequence of the OBJECT element's design is that it offers a mechanism for specifying alternate object renderings; each embedded OBJECT declaration may specify alternate content types. If a user agent cannot render the outermost OBJECT, it tries to render the contents, which may be another OBJECT element, etc. In the following example, we embed several OBJECT declarations to illustrate how alternate renderings work. A user agent will attempt to render the first OBJECT 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.
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 type 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. Inline vs. external data. 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. Here's an example that illustrates how inline data may be fed to an OBJECT:
A neat animation of The Earth! 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 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).
You're missing a really cool poem viewer ...
This is a navigation bar.
The following example illustrates how image maps may be shared.
Nested OBJECT elements are useful for providing fallbacks in case a user agent doesn't support certain formats. For example:
The location clicked is passed to the server as follows. The user agent derives a new URI from the URI specified by the href attribute of the 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".
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.
13.7 Visual presentation of images, objects, and applets
All IMG and OBJECT attributes that concern visual alignment and presentation have been deprecated in favor of style sheets.
13.7.1 Width and height
Attribute definitions
width = length [CN]
Image and object width override.
height = length [CN]
Image and object height override.
When specified, the width and height attributes tell user agents to override the natural image or object size in favor of these values.
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.
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.
13.7.2 White space around images and objects
Attribute definitions
hspace = pixels [CN]
Deprecated. This attribute specifies the amount of white space to be inserted to the left and right of an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length.
vspace = pixels [CN]
Deprecated. This attribute specifies the amount of white space to be inserted above and below an IMG, APPLET, or OBJECT. The default value is not specified, but is generally a small, non-zero length.
13.7.3 Borders
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 element).
Attribute definitions
border = pixels [CN]
Deprecated. This attribute specifies the width of an IMG or OBJECT border, in pixels. The default value for this attribute depends on the user agent.
13.7.4 Alignment
Attribute definitions
align = bottom|middle|top|left|right
Deprecated. This attribute specifies the position of an IMG, OBJECT, or APPLET with respect to its context.
The following values for align concern the object's position with respect to surrounding text:
bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value.
middle: means that the center of the object should be vertically aligned with the current baseline.
top: means that the top of the object should be vertically aligned with the top of the current text line.
Two other values, left and right, cause the image to float to the current left or right margin. They are discussed in the section on floating objects.
Differing interpretations of align. 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.
13.8 How to specify alternate text
Attribute definitions
alt = text [CS]
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 lang attribute.
Several non-textual elements (IMG, AREA, APPLET, and INPUT) 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.
The alt attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:
Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" 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.
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.
Implementors should consult the section on accessibility for information about how to handle cases of omitted alternate text.
--------------------------------------------------------------------------------
previous next contents elements attributes index
Best offer
CyD Image Mapper
CyD Image Map allows you to create image maps for your Web site. CyD Image Map includes WYSIWYG editing. You can add an unlimited number of map elements, including rectangular, circular, and polygonal region types. CyD Image Map supports all Web graphic standards, mouseover and ALT text features.
Best offer
CyD FTP Client XP
Powerful but easy to use program to download and upload files to FTP servers. Try an FTP client with built-in zipping utilities.
This is a powerful but easy to use program to download and upload files to FTP servers. Some of its more advanced features include multi threaded files and automatic transfer of files. This program is a joy to people who prefer the computer to "do the work".
Best offer
CyD WEB Animation Studio
Easy GIF animation program. Optimization of graphic pallets to reduce file sizes. Online help. It's vary easy.
Products | Buy now | Downloads | Support | Contact Us
Copyright © 1999-2003, CyD Software Labs. All rights reserved.
Legal Notices | Privacy Policy
Products Buy Now Downloads Services Support About Us Web Design
Internet
Utilities
Network tools
Partner's productsCyD WEB Development
CyD GIF Studio Pro
CyD WEB Animation Studio
CyD HTML Editor
CyD FTP Client XPCyD FTP Client XP
CyD PostmanCyD Archiver XP
CyD Image Viewer
CyD Organizer (Free)CyD Net Utils
CyD Careful ObserverPurchase on-lineFree Trials
Library
DocumentsCyD Software Documents
WEB Design DocumentsWEB Design
WEB Development
LibrarySupport information
FeedbackAbout us
Feedback
E-Mail