13 Objects, Images and Applets

Content

  1. Introduction to objects, images and applets
  2. Image inclusion: IMG element
  3. General inclusion: OBJECT element
    1. Rules for representing objects
    2. Object initialization: PARAM element
    3. Global naming schemes for objects
    4. Announcing and initializing an object
  4. Enable applet: APPLET element
  5. Comments on the implemented documents
  6. Navigation maps
    1. Client navigation maps: MAP and AREA elements
    2. Server-side navigation maps
  7. Visual representation of images, objects and applets
    1. Width and height
    2. Space around images and objects
    3. Borders
    4. Alignment
  8. How to specify an alternate text

13.1 Introduction to Objects, Images and Applets

HTML multimedia features allow authors to include in their pages images, applets (programs that are automatically downloaded and executed on the user's machine), video clips and other documents in HTML format.

For example, to include a PNG image in a document, authors can use the following code: 

 <BODY>
 <P> Near the Grand Canyon:
 <OBJECT data = "canyon.png" type = "image / png">
 <EM> Around </ EM> the Grand Canyon.
 </ OBJECT>
 </ BODY>

In previous versions of HTML, authors could include images (using IMG ) and applets (using APPLET ). These elements have several limitations:

  • They can not solve a more general problem - the inclusion of new and possible types of devices in the future.
  • The APPLET element works only with Java applets. This element is now undesirable , instead an OBJECT element is used.
  • They cause accessibility problems.

To address all these issues in HTML 4.0, an OBJECT element is introduced, providing a comprehensive solution for including objects. The OBJECT element allows authors of documents in HTML format to specify all the information necessary to represent the object by the user agent: source code, initial values ​​and operational data. In this specification, the term "object" is used to describe all objects that you want to include in HTML documents; Other terms: applets, plug-ins, device descriptors, etc.

A new OBJECT element, thus, subsumes some tasks performed by existing elements. Consider the following classification of functions:

Switch-on type Specific item Common element
Picture IMG OBJECT
Applet APPLET ( Undesirable .) OBJECT
Another HTML document IFRAME OBJECT

It can be seen from the table that each type of inclusion has a concrete and general solution. A common OBJECT element serves as a solution for using future types of devices.

To enable images, authors can use the OBJECT element or the IMG element.

To include applets, authors should use the OBJECT element, since the use of the APPLET element is undesirable .

To include one HTML document in another, authors can use a new IFRAME element or an OBJECT element. In both cases, the embedded document does not depend on the main document. Visual user agents can present an embedded document as a separate window in the main document. To compare the OBJECT and IFRAME elements, refer to the comments on the implemented documents .

Links and links can be linked to images and other included objects, using standard reference mechanisms , and also using image maps . On the navigation map, geometric areas of the included object are set, and each of them is assigned a reference. When activated, these links can cause the download of the document, run the program on the server, etc.

In the following sections, we discuss various mechanisms that authors can use to include multimedia and create navigation maps for these objects.

13.2 Image activation: the IMG element 

  <! - To avoid problems with text-based user agents, 
  And also for the inclusion of images to be clear
  Users of non-visual agents and could use them, 
  You must specify descriptions in the ALT element and avoid using 
  Server nautical charts ->
 <! ELEMENT IMG - O EMPTY - Embedded Image ->
 <! ATTLIST IMG
  % Attrs;
  - % coreattrs , % i18n , % events -
  Src % URI;
  #REQUIRED - The URI of the embedded image -
  Alt % Text;
  #REQUIRED - brief description -
  Longdesc % URI;
  #IMPLIED - link to a long description 
  (Complements alt) -
  Height % Length;
  #IMPLIED - height override -
  Width % Length;
  #IMPLIED - width override -
  Usemap % URI;
  #IMPLIED - use client 
  Navigation map -
  Ismap (ismap) #IMPLIED - use server 
  Navigation map -
  >

Start tag: required , End tag: not allowed

Attribute definitions

Src = uri [CT]
This attribute specifies the location of the image. Examples of widely recognized formats are GIF, JPEG and PNG.
Longdesc = uri [CT]
This attribute specifies a reference to a long description of the image. This description should complement the short description given by the alt attribute. If a navigation map is associated with the image, this attribute should contain information about its contents. This is especially important for server-side navigation maps.

Attributes defined elsewhere

The IMG element implements the image in the current document to the address from the element definition. The IMG element does not have content; It is usually replaced by an image assigned by the src attribute, the exception is left or right aligned images that are "floated" out of line.

In the example above, we defined a link to a family photo. Here we insert the photo directly into the current document: 

 <BODY>
 <P> I just returned from vacation!  Here is a picture of my family on the lake:
 <IMG src = "http://www.somecompany.com/People/Ian/vacation/family.png"
  Alt = "Photo of my family on the lake.">
 </ BODY>

The same effect can be achieved with the OBJECT element as follows: 

 <BODY>
 <P> I just returned from vacation!  Here is a picture of my family on the lake:
 <OBJECT data = "http://www.somecompany.com/People/Ian/vacation/family.png"
  Type = "image / png">
 Photo of my family on the lake.
 </ OBJECT>
 </ BODY>

The alt attribute specifies an alternative text that is generated if the image can not be displayed (for information on how to specify alternative text , see below). User agents should generate alternative text if they do not support the image if they do not support a particular type of image or if they are configured to not output images.

The following example shows how you can use the longdesc attribute to reference a more detailed description: 

 <BODY>
 <P>
 <IMG src = "sitemap.gif"
  Alt = "HP Lab Site Map"
  Longdesc = "sitemap.shtml">
 </ BODY>

The alt attribute specifies a brief description of the image. It should be enough to allow users to decide if they want to follow the link defined by the longdesc attribute to get a more detailed description, here is the link "sitemap.shtml".

For information about the size of the image, alignment, and borders, see the section on visual representation of objects, images, and applets .

13.3. General inclusion: OBJECT element 

  <! ELEMENT OBJECT - - (PARAM | % flow; ) *
  - general embedded object ->
 <! ATTLIST OBJECT
  % Attrs;
  - % coreattrs , % i18n , % events -
  Declare (declare) #IMPLIED - declare, but do not instantiate the flag -
  Classid % URI;
  #IMPLIED - defines the application -
  Codebase % URI;
  #IMPLIED - the base URI for classid, data, archive--
  Data % URI;
  #IMPLIED - reference to the data of the object -
  Type % ContentType;
  #IMPLIED - content type for data -
  Codetype % ContentType;
  #IMPLIED - the content type for the code -
  Archive % URI;
  #IMPLIED - space-separated list of archives -
  Standby % Text;
  #IMPLIED - message displayed at startup -
  Height % Length;
  #IMPLIED - height override -
  Width % Length;
  #IMPLIED - width override -
  Usemap % URI;
  #IMPLIED - use the client's navigation map -
  Name CDATA #IMPLIED - submit as part of the form -
  Tabindex NUMBER #IMPLIED - position in the transition sequence -
  >

Start tag: required , End tag: required

Attribute definitions

Classid = uri [CT]
This attribute can be used to specify the location of an object using a URI. It can be used together with the data attribute or as an alternative to it, depending on the type of object.
Codebase = uri [CT]
This attribute specifies the base path used to resolve the relative URI addresses specified in the classid , data, and archive attributes. If this attribute is not present, the default value is the base address of the URI of the current document.
Codetype = content-type [CI]
This attribute specifies the type of data content that you should expect to receive when loading an object specified by the classid attribute. This attribute is optional, but is recommended if the classid attribute is used, because it allows the user agent to avoid loading information for a content type that it does not support. If this attribute is not present, the value of the type attribute is used by default.
Data = uri [CT]
This attribute can be used to specify the location of the object's data, for example, image data for image-defining objects, or more generally a serialized object form that can be used to recreate it. If a relative URI is given, it must be interpreted relative to the codebase attribute.
Type = content-type [CI]
This attribute specifies the content type for the data specified by the data attribute. This attribute is optional, but is recommended if the data attribute is used because it allows the user agent to avoid loading information for a content type that they do not support.
Archive = uri list [CT]
This attribute can be used to define a space-separated list of URIs for archives containing object-related resources that can include resources specified by the classid and data attributes. Pre-loading archives will reduce the load time of the object. Archives specified as relative URI addresses must be interpreted relative to the codebase attribute.
Declare [CI]
If this Boolean attribute is specified, it makes the current OBJECT definition only an advertisement. The object must be instantiated by the subsequent OBJECT definition referencing this declaration.
Standby = text [CS]
This attribute specifies a message that the user agent can generate when the implementation is loaded and the object data.

Attributes defined elsewhere

Most user agents have built-in mechanisms for generating basic data types, such as text, GIF images, colors, fonts, and a number of graphical elements. To generate data types of data types that user agents do not support by default, they usually start external applications. The OBJECT element allows authors to manage the generation of data-to specify external generation or the use of some program-defined program that generates data in the user agent.

In a more general case, the author will need to define three types of information:

  • Implementation of the included object. For example, if the included object is an applet, the author must specify the location of the applet's executable code.
  • Generated data. For example, if the included object is a program that generates font data, the author must specify the location of this data.
  • Additional values ​​required by the object. For example, some applets may need initial values ​​for their parameters.

The OBJECT element allows authors to specify all three types of object data, but authors do not have to specify them all. For example, some objects do not require data (for example, an applet that performs animation). Others may not need initialization. Others may not need additional information about the implementation, that is, the user agent itself may already know how to generate this type of data (for example, images in GIF format).

The authors specify the implementation of the object and the location of the data generated by the OBJECT element. However, to indicate working values, authors use the PARAM element discussed in the section on object initialization.

An OBJECT element can also be present inside a HEAD element. Because user agents do not normally generate items in HEAD , authors need to make sure that there is no content in all OBJECT elements in HEAD that can be generated. For an example of how to include an OBJECT element in a HEAD element, see the section on sharing the frame data .

For information on the OBJECT element in forms, see the section on form management .

13.3.1 Rules for generating objects

The user agent must interpret the OBJECT element in accordance with the following precedence rules:

  1. First, the user agent must try to generate the object. It should not generate the contents of the element, but it should be checked in case the element contains additional PARAM children (see object initialization ) or MAP elements (see client navigation maps ).
  2. If the user agent for any reason can not generate the object (not configured for this, insufficient resources, an incorrect architecture, etc.), it should try to generate its contents.

Authors should not include content in the OBJECT elements located in the HEAD element.

In the following example, we insert an applet representing the clock into the document using the OBJECT element. An applet written in Python does not need additional and working values. The classid attribute specifies the location of the applet: 

 
 <P> <OBJECT classid = "http://www.miamachina.it/analogclock.py">
 </ OBJECT>

Note that the clock will be generated as soon as the user agent interprets this OBJECT declaration. You can defer the generation of an object by starting with the object declaration (described below).

Authors must execute the declaration, including alternative text, as the contents of the OBJECT element in the event that the user agent can not generate the clock. 

 
 <P> <OBJECT classid = "http://www.miamachina.it/analogclock.py">
 Clock with animation.
 </ OBJECT>

One important consequence of creating an OBJECT element is that it offers a mechanism for specifying an alternative generation of objects; In each embedded OBJECT declaration, alternative content types can be specified. If the user agent can not generate the outermost OBJECT , it tries to generate content that can be used by another OBJECT element, etc.

In the following example, we implement several OBJECT ads in order to show the operation of alternative generation. The user agent will try to generate the first OBJECT element that it can, in the following order: (1) Earth applet written in Python language, (2) Earth clip in MPEG format, (3) Earth image in GIF format, (4) alternate text . 

 <P> <! - First try an applet in Python ->
 <OBJECT title = "View of the Earth from Space" 
  Classid = "http: //www.observer.mars/TheEarth.py">
  <! - Then try playing a video clip 
  In MPEG format ->
  <OBJECT data = "TheEarth.mpeg" type = "application / mpeg">
  <! - Then try the image in GIF format ->
  <OBJECT data = "TheEarth.gif" type = "image / gif">
  <! - Then generate the text ->
  View <STRONG> Earth </ strong> from space.
  </ OBJECT>
  </ OBJECT>
 </ OBJECT>

An external declaration defines an applet that does not need data or initial values. The second declaration defines a clip in MPEG format and, since the location of the MPEG format processor is not specified, it is assumed that the clip will be processed by the user agent. We also set the type attribute, so the user agent that knows that it can not generate the clip in MPEG format will not download the file "TheEarth.mpeg" from the network. The third declaration specifies the location of the file in GIF format and determines the alternative text in case all other mechanisms fail.

Built-in and external data. Data that must be generated can be specified in two ways: as an embedded or external resource. The latter method usually provides faster generation, but is inconvenient when generating a large amount of data.

The following is an example showing how embedded data can be fed to an OBJECT : 

  <P>
 <OBJECT id = "clock1"
  Classid = "clsid: 663C8FEF-1EF9-11CF-A3DB-080036F12502"
  Data = "data: application / x-oleobject; base64, ... base64 data ... ">
  Clock.
 </ OBJECT>

For information about the size, alignment, and boundaries of an object, see the visual representation of objects, images, and applets .

13.3.2 Object initialization: PARAM element 

  <! ELEMENT PARAM - O EMPTY - value of the named property ->
 <! ATTLIST PARAM
  Id ID #IMPLIED - id within 
  Document -
  Name CDATA #REQUIRED - property name -
  Value CDATA #IMPLIED - property value -
  Valuetype (DATA | REF | OBJECT) DATA - How to interpret the value -
  Type % ContentType;
  #IMPLIED - the content type for the value,
  If valuetype = ref -
  >

Start tag: required , End tag: not allowed

Attribute definitions

Name = cdata
This attribute specifies the name of the working parameter, which should be understandable to the inserted object. Whether the property name is case sensitive depends on the specific implementation of the object.
Value = cdata
This attribute specifies the value of the working parameter specified by the name attribute. Property values ​​do not matter in HTML; Their meaning is determined by the object.
Valuetype = data | ref | object [CI]
This attribute specifies the type of the value attribute. Possible values ​​are:
  • Data: This is the default value. It means that the value specified by the value attribute will be defined and passed to the object as a string.
  • Ref: The value specified by the value attribute is the resource URI of the resource where the working values ​​are stored. This allows the support tools to identify URI addresses, data as parameters. The URI must be passed to the object as is , that is, unresolved.
  • Object: The value specified by the value attribute is the identifier referring to the OBJECT declaration in the same document. The id must be the value of the id attribute for the declared OBJECT element.
Type = content-type [CI]
This attribute specifies the content type of the resource assigned by the value attribute only if the value of the valuetype attribute is "ref". Thus, this attribute specifies the type of values ​​for the user agent that will be located at the URI assigned by the value attribute.

Attributes defined elsewhere

PARAM elements define a set of values ​​that an object can need during operation. OBJECT or APPLET elements can have any number of PARAM attributes in any order, but they must be placed at the beginning of the body of the included OBJECT or APPLET element.

The syntax of names and values ​​is considered understandable to the object handler. This document does not specify how user agents should load name / value pairs, as well as how they should interpret duplicate parameter names.

Let's return to the example with the clock and show the use of the PARAM element: suppose that the applet can take two working parameters that determine its initial height and width. We can set the original dimensions of 40x40 pixels using two PARAM elements. 

 
 <P> <OBJECT classid = "http://www.miamachina.it/analogclock.py">
 <PARAM name = "height" value = "40" valuetype = "data">
 <PARAM name = "width" value = "40" valuetype = "data">
 This user agent can not generate the application in Python.
 </ OBJECT>

In the following example, the operating data for the "Init_values" parameter of the object is specified as an external resource (GIF file). Thus, for the valuetype attribute, the value "ref" is set, and the value attribute is the address of the resource URI. 

 <P> <OBJECT classid = "http://www.gifstuff.com/gifappli"
  Standby = "Downloading Elvis ...">
 <PARAM name = "Init_values"
  Value = "./ images / elvis.gif">
  Valuetype = "ref">
 </ OBJECT>

Note that we also set the standby attribute, so that the user agent can display the message at the time the generator is loaded.

When the OBJECT element is generated, the user agents must only search content for those PARAM elements that are their direct children and "feed" them to the OBJECT .

Thus, in the following example, if "obj1" is generated, "param1" is applied to "obj1" (and does not apply to "obj2"). If "obj1" is not generated, and "obj2" is generated, "param1" is ignored, and "param2" is applied to "obj2". If no OBJECT is generated, no PARAM is applied. 

  <P>
 <OBJECT id = "obj1">
  <PARAM name> "param1">
  <OBJECT id = "obj2">
  <PARAM name = "param2">
  </ OBJECT>
 </ OBJECT>

13.3.3 Global naming schemes for objects

The location of the object handler is specified by the URI address. As mentioned in the introduction to the URI , the first segment of the absolute URI specifies the naming scheme used to transfer data assigned by the URI address. For documents in HTML format, this schema is often "http". Some applets can use external naming schemes. For example, when specifying a Java applet, authors can use URI addresses starting with "java", I can use "clsid" for ActiveX applets.

In the following example, we insert an applet in the Java language into an HTML document. 

 <P> <OBJECT classid = "java: program.start">
 </ OBJECT>

By setting the codetype attribute , the user agent can determine whether to download the Java application, depending on its capabilities. 

 <OBJECT codetype = "application / java-archive"
  Classid = "java: program.start">
 </ OBJECT>

Some generation circuits need additional information to determine processing, so they need to specify where this information is located. Authors can specify the path to the object's handler using the codebase attribute. 

 <OBJECT codetype = "application / java-archive"
  Classid = "java: program.start">
  Codebase = "http://foooo.bar.com/java/myimplementation/"
 </ OBJECT>

The following example (using the classid attribute) specifies an ActiveX object as a URI address that starts with the naming scheme "clsid". The data attribute specifies the location of the generated data (one more hour). 

 <P> <OBJECT classid = "clsid: 663C8FEF-1EF9-11CF-A3DB-080036F12502"
  Data = "http://www.acme.com/ole/clock.stm">
 This application is not supported.
 </ OBJECT>

13.3.4 Announcing and initializing an object

In the above examples, separate object definitions were shown. If the document should contain multiple instances of the same object, the declaration and initialization of the object can be divided. This method has several advantages:
  • The data can be downloaded by the user agent from the network once (at the time of the announcement) and reused in each initialization.
  • You can initialize an object from a location different from the one in which the object was advertised, for example, from a link.
  • Objects can be defined as working data for other objects.

To declare an object so that it is not processed by the user agent during the reading, set the declare logical attribute of the OBJECT element. At the same time, authors must identify the advertisement by setting a unique value for the id attribute in the OBJECT element. The initialization of the object will later refer to this identifier.

The declared OBJECT must be present in the document before the first OBJECT instance.

The object defined with the declare attribute is initialized each time an element that references this object is to be generated (for example, a link to it is activated, an object referring to it is activated, etc.).

In the following example, we declare OBJECT and call it an initialization, specifying it in the link. Thus, the object can be activated by clicking, for example, on the selected text. 

  <P> <OBJECT declare
  Id = "earth.declaration" 
  Data = "TheEarth.mpeg" 
  Type = "application / mpeg">
  View <STRONG> Earth </ strong> from space.
 </ OBJECT>
 ... further in the document ...

 <P> Beautiful <A href="#earth.declaration"> animated image of the Earth! </A>

The following example shows how to specify working values ​​that are other objects. In this example, we send a text (poem) to a hypothetical mechanism for viewing poems. The object recognizes the working parameter named "font" (for example, to generate a poem text using a specific font). The value of this parameter is itself an object that inserts (but does not generate) a font object. The relationship between the font object and the poem viewer object is achieved by (1) assigning the id attribute in the font object declaration and (2) referencing it in the PARAM element of the poem viewer object (using valuetype and value ). 

  <P> <OBJECT declare
  Id = "tribune"
  Type = "application / x-webfont"
  Data = "tribune.gif">
 </ OBJECT>
 ... viewing the poem from the KublaKhan.txt file ...

 <P> <OBJECT classid = "http://foo.bar.com/poem_viewer" 
  Data = "KublaKhan.txt">
 <PARAM name = "font" valuetype = "object" value = "# tribune">
 <P> You do not have such a cool program to view poems ...
 </ OBJECT>

User agents that do not support the declare attribute must generate the contents of the OBJECT declaration.

13.4 Enabling the applet : the APPLET element

The APPLET element is undesirable (like all attributes of this element) ; instead, use the OBJECT element.

For a formal definition, see Transitional DTD .

Attribute definitions

Codebase = uri [CT]
This attribute specifies the base address of the applet's URI. If this attribute is not specified, the default base address of the URI used for the entire document is used by default. The values ​​of this attribute can only be subdirectories of the directory in which the current document is located.
Code = cdata [CS]
This attribute specifies the file name of the class that contains the compiled subclass of the applet or the path by which the class can be obtained, including the class file itself. It is interpreted taking into account the applet code. For this, one of the code or object attributes must be specified.
Name = cdata [CS]
This attribute specifies the name of the applet instance, which makes it possible for applets on one page to find each other and interact with each other.
Archive = uri-list [CT]
This attribute specifies a comma-separated list of URI URLs for archives containing classes and other resources that will be "preloaded". Classes are loaded using an AppletClassLoader instance with the specified codebase . The relative addresses of the URI of the archives are interpreted relative to the codebase of the applet. Preloading resources can significantly increase the performance of applets.
Object = cdata [CS]
This attribute specifies the name of the resource that contains the serialized view of the applet's state. It is interpreted with respect to the codebase of the applet. Serialized data contains the name of the applet class, but not the handler. The class name is used to load the handler from a class file or archive.

If the applet is "deserialized", the start () method is called instead of the init () method. Attributes that are valid when the source object is serialized are not restored. Attributes passed to this instance of APPLET will be available to the applet. Authors should very carefully use this property. Before the serialized the vapple must be stopped.

One of the code or object attributes must be present. If both the code and object attributes are given, and they have different class names, this is an error.

Width = length [CI]
This attribute specifies the initial width of the applet's display area (not including the windows and dialogs created by the applet).
Height = length [CI]
This attribute specifies the initial height of the applet's display area (not including the windows and dialogs created by the applet).

Attributes defined elsewhere

This element, supported by all Java-enabled browsers, allows designers to embed Java applets in HTML documents. It is undesirable , and instead use the OBJECT element.

The contents of the APPLET element serve as alternate information for user agents that do not support this element or are not configured to support applets. Otherwise, user agents should ignore the content.

EXAMPLE OF UNDESIRABLE USE:
In the following example, the APPLET element includes a Java applet in the document. Since the codebase attribute is not set, it is assumed that the applet is in the same directory as the document itself. 

  <APPLET code = "Bubbles.class" width = "500" height = "500">
 A Java applet that draws moving bubbles.
 </ APPLET>

This example can be rewritten using the OBJECT element as follows: 

 <P> <OBJECT codetype = "application / java"
  Classid = "java: Bubbles.class"
  Width = "500" height = "500">
 A Java applet that draws moving bubbles.
 </ OBJECT>

You can specify the initial values ​​for the applet using the PARAM element.

EXAMPLE OF UNDESIRABLE USE:
The following applet in Java: 

 <APPLET code = "AudioItem" width = "15" height = "15">
 <PARAM name = "snd" value = "Hello.au | Welcome.au">
 A Java applet that plays a welcome audio file.
 </ APPLET>

Can be defined using the OBJECT element as follows: 

 <OBJECT codetype = "application / java"
  Classid = "AudioItem" 
  Width = "15" height = "15">
 <PARAM name = "snd" value = "Hello.au | Welcome.au">
 A Java applet that plays a welcome audio file.
 </ OBJECT>

13.5 Comments on the implemented documents

Sometimes, instead of referring to a document, the author needs to incorporate it directly into the primary HTML document. Authors can use the IFRAME or OBJECT element for this, but these elements are somewhat different. These two elements not only have different content models, but also the IFRAME element can be the target frame (for more information, see the section on specifying information about the target frame ) and can be "selected" by the user agent for printing, viewing HTML code, etc. User agents can generate selected frames in a manner other than generating unselected frames (for example, displaying a border around the selected frame).

The implemented document is completely independent of the document in which it is implemented. For example, relative URI addresses in an embedded document are resolved according to the base URI address specified in the embedded document, and not in the primary document. An embedded document is only generated in another document (for example, in a sub-window); It remains independent in all other respects.

For example, the following line embeds the contents of the embed_me.shtml file at the location of the document where the OBJECT definition was encountered. 

  ... previous text ... <OBJECT data = "embed_me.shtml">
 Attention: it is not possible to embed the embed_me.shtml file.
 </ OBJECT>
 ... the following text ...

Remember that the contents of the OBJECT element must be generated only if the file specified by the data attribute can not be loaded.

The behavior of the user agent in cases where the file includes itself is not defined.

13.6 Navigation charts

Navigation maps allow authors to define areas of an image or an object and assign a certain action to each area (for example, loading a document, launching a program, etc.) When an area is activated by the user, an action is performed.

A navigation map is created by assigning an object with the corresponding geometric areas.

There are two types of navigation maps:

  • Customer. When the user activates the area of ​​the client navigation map using the mouse, the coordinates of the point are interpreted by the user agent. The user agent selects the link specified for the activated region and executes it.
  • Server. When the user activates the server-side navigation map area with the mouse, the click-point coordinates are passed to the agent on the server defined using the href attribute of element A. The agent on the server interprets the coordinates and performs the corresponding actions.

Client navigational charts are preferable to server-side maps for at least two reasons: they are accessible to users of non-graphic agents and allow you to immediately determine whether the pointer is in the active area.

13.6.1 Client navigational charts: MAP and AREA elements 

  <! ELEMENT MAP - - (( % block; ) + | AREA +) - client navigation map ->
 <! ATTLIST MAP
  % Attrs;
  - % coreattrs , % i18n , % events -
  Name CDATA #REQUIRED - for usemap link -
  >

Start tag: required , End tag: required 

  <! ELEMENT AREA - O EMPTY - the area of ​​client navigation 
  Maps ->
 <! ATTLIST AREA
  % Attrs;
  - % coreattrs , % i18n , % events -
  Shape% Shape;
  Rect - controls the interpretation of coordinates -
  Coords% Coords;
  #IMPLIED - comma-separated list of lengths -
  Href % URI;
  #IMPLIED - address of the URI of the associated resource -
  Nohref (nohref) #IMPLIED - action for this region 
  Not assigned -
  Alt % Text;
  #REQUIRED - brief description -
  Tabindex NUMBER #IMPLIED - position in sequence 
  Transition -
  Accesskey % Character;
  #IMPLIED - access character -
  Onfocus % Script;
  #IMPLIED - the item received focus -
  Onblur % Script;
  #IMPLIED - item lost focus -
  >

Start tag: required , End tag: not allowed

MAP element attribute definitions

Name = cdata [CI]
This attribute assigns the name of the navigation map specified by the MAP element.

The attribute definitions of the AREA element

Shape = default | rect | circle | poly [CI]
This attribute specifies the shape of the area. Possible values ​​are:
  • Default: Specifies the entire scope.
  • Rect : Specifies the rectangular area.
  • Circle: Specifies the round region.
  • Poly : Specifies the polygon area.
Coords = coordinates [CN]
This attribute determines the position of the form on the screen. The number and order of values ​​depend on the specific form. Possible combinations:
  • Rect: x left border, y upper border, x right border, y lower border.
  • Circle: x center, y center, radius. Note. If the radius is specified as a percentage, the user agents must calculate the final radius value, depending on the width and height assigned to the object. The radius must be the smallest of these two values.
  • Poly: x1, y1, x2, y2, ..., xN, yN.

The coordinates are given relative to the upper-left corner of the object. All values ​​are lengths . All values ​​are separated from each other by commas.

Nohref [CI]
If this Boolean attribute is set, it indicates that there is no link to this region.

Attribute to associate a navigation map with an element

Usemap = uri [CT]
This attribute associates the navigation map with the element. The navigation map is defined using the MAP element. The value of the usemap attribute must match the value of the name attribute of the associated MAP element.

Attributes defined elsewhere

The MAP element defines a client navigation map that can be associated with one or more elements ( IMG , OBJECT or INPUT ). The navigation map is associated with the element using the usemap attribute of this element.

The presence of the usemap attribute in the OBJECT element implies that the object is included as an image. Moreover , if a client navigation map is associated with the OBJECT element, user agents can interpret the interaction of the user with the OBJECT element exclusively in terms of the client navigation map. This allows user agents (for example, sound browsers or robots) to interact with the OBJECT element without processing it; The user agent may not even load (or process) the object. If the navigation map is associated with the OBJECT , authors can not be sure that this object will be loaded and processed by all user agents.

Each MAP element can contain the following:

  1. One or more AREA elements. These elements do not have content, but define the geometric areas of the navigation map and the links associated with each area. Note that when you use this method, the MAP element does not have generated content. Thus, authors should change the text for each AREA element using the alt attribute (see below for information on how to specify alternative text ).
  2. Block level content. This should include elements A , defining the geometric areas of the navigation map, and links related to each area. Note that when you use this method, the contents of the MAP element can be generated by the user agent. To create more accessible documents, authors should use this method.

If more than one defined region overlaps, the element specified in the document is the first (that is, the element is responsible for entering the user).

User agents and authors should provide textual alternatives to graphic navigation charts in case the schedule is unavailable or the user can not access it. For example, user agents can use the text of the alt attribute to create text links instead of a graphical navigation map. Such links can be activated in various ways (keyboard, voice, etc.).

Note. The MAP element is not compatible with user agents for HTML version 2.0.

Examples of client navigational charts  

In the following example, we create a client navigation map for the OBJECT element. We do not want to generate the contents of the map when generating the OBJECT , so we "hide" the MAP element in the contents of the OBJECT element. Then the content of the MAP element will be generated only if the contents of the OBJECT element can not be segmented. 

  <HTML>
  <HEAD>
  <TITLE> Cool page! </ TITLE>
  </ HEAD>
  <BODY>
  <P> <OBJECT data = "navbar1.gif" type = "image / gif" usemap = "# map1">
  <MAP name = "map1">
  <P> Navigating the site:
  <A href="guide.shtml" shape="rect" coords="0,0,118,28"> Access Guide </a> |
  <A href="shortcut.shtml" shape="rect" coords="118,0,184,28"> Go back </A> |
  <A href="search.shtml" shape="circle" coords="184,200,60"> Search </A> |
  <A href="top10.shtml" shape="poly" coords="276,0,373,28,50,50,276,0"> The first ten </A> <
  </ MAP>
  </ OBJECT>
  </ BODY>
 </ HTML>

We may need to generate the contents of the map, even if the user agent can generate an OBJECT element. For example, we want to associate a navigation map with an OBJECT element and include a text navigation bar at the bottom of the page. To do this, we define the MAP element outside the OBJECT element: 

  <HTML>
  <HEAD>
  <TITLE> Cool page! </ TITLE>
  </ HEAD>
  <BODY>
  <P> <OBJECT data = "navbar1.gif" type = "image / gif" usemap = "# map1">
  </ OBJECT>
  ... continued the page ... <MAP name = "map1">
  <P> Navigating the site:
  <A href="guide.shtml" shape="rect" coords="0,0,118,28"> Access Guide </a> |
  <A href="shortcut.shtml" shape="rect" coords="118,0,184,28"> Go back </A> |
  <A href="search.shtml" shape="circle" coords="184,200,60"> Search </A> |
  <A href="top10.shtml" shape="poly" coords="276,0,373,28,50,50,276,0"> First ten </A>
  </ MAP>
  </ BODY>
 </ HTML>

In the following example, we create a similar navigation map, this time using the AREA element. Note the use of the alt text: 

 <P> <OBJECT data = "navbar1.gif" type = "image / gif" usemap = "# map1">
  <P> This is the navigation bar.
  </ OBJECT>

 <MAP name = "map1">
  <AREA href = "guide.shtml" 
  Alt = "Access Guide" 
  Shape = "rect" 
  Coords = "0,0,118,28">
  <AREA href = "search.shtml" 
  Alt = "Search" 
  Shape = "rect" 
  Coords = "184,0,276,28">
  <AREA href = "shortcut.shtml" 
  Alt = "Going" 
  Shape = "circle"
  Coords = "184,200,60">
  <AREA href = "top10.shtml" 
  Alt = "The first ten" 
  Shape = "poly" 
  Coords = "276,0,373,28,50,50,276,0">
 </ MAP>

Here is the version using the IMG element instead of the OBJECT element (with the same MAP declaration): 

 <P> <IMG src = "navbar1.gif" usemap = "# map1" alt = "navigation bar">

The following example shows how elements can share navigation charts.

Nested OBJECT elements are useful for providing fallbacks in case the user agent does not support certain formats. For example: 

  <P>
 <OBJECT data = "navbar.png" type = "image / png">
  <OBJECT data = "navbar.gif" type = "image / gif">
  Text with an image description ...

  </ OBJECT>
 </ OBJECT>

If the user agent does not support the PNG format, it tries to generate the image in GIF format. If it does not support GIF (for example, it is a user's speech agent), it reproduces the text description specified in the contents of the internal OBJECT element. If the OBJECT elements are nested in this way, the authors can ensure that these elements share navigation charts: 

 <P>
 <OBJECT data = "navbar.png" type = "image / png" usemap = "# map1">
  <OBJECT data = "navbar.gif" type = "image / gif" usemap = "# map1">
  <MAP name = "map1">
  <P> Navigating the site:
  <A href="guide.shtml" shape="rect" coords="0,0,118,28"> Access Guide </a> |
  <A href="shortcut.shtml" shape="rect" coords="118,0,184,28"> Go back </A> |
  <A href="search.shtml" shape="circle" coords="184,200,60"> Search </A> |
  <A href="top10.shtml" shape="poly" coords="276,0,373,28,50,50,276,0"> First ten </A>
  </ MAP>
  </ OBJECT>
 </ OBJECT>

The following example shows how you can specify anchors to create inactive zones in the navigation map. The first anchor defines a small round area with which the reference is not associated. The second anchor defines a round area of ​​a larger size with the same center coordinate. Both of them together form a ring, the center of which is inactive, and the outer part is active. The order of the anchor definition is important, because the smaller circle should take precedence over the larger one. 

  <MAP name = "map1">
 <P>
 <A shape="circle" coords="100,200,50"> I'm inactive. </A>
 <A href="outer-ring-link.shtml" shape="circle" coords="100,200,250"> I'm active. </A>
 </ MAP>

Similarly, the nohref attribute of the AREA element declares that the reference is not associated with the geometric domain.

13.6.2 Server- side navigation maps

Server-side navigation maps are of interest in cases where the map is too complex.

You can only determine the server's navigation map for IMG and INPUT elements. In the case of an IMG element, this element must be included in element A. In the case of the INPUT element, it must be of the type "image". In both cases, the logical attribute ismap [CI] must be set for the element.

When a user activates a link by clicking on an image, the screen coordinates are sent directly to the server where the document is located. The screen coordinates are expressed as pixels relative to the image. For normative information about defining pixels and their scaling, see [CSS1] .

In the following example, the active region defines a server reference. Thus, clicking anywhere in the image will cause the coordinates to be transferred to the server. 

 <P> <A href="http://www.acme.com/cgi-bin/competition">
  <IMG src = "game.gif" ismap alt = "target"> </A>

The coordinates of the area in which the click occurred are transmitted to the server as follows. The user agent gets a new URI address from the URI address specified in the href attribute of the A element, adding `? 'Followed by the x and y coordinates separated by a comma. Then, a link is passed using the new URI address. For example, in this example, if the user clicks at the x = 10, y = 27 coordinates, the new URI address is "http://www.acme.com/cgi-bin/competition?10,27".

User agents that do not offer users the means to select certain coordinates (for example, non-graphical user agents, keyboard-dependent user agents, user agents, etc.) should send the coordinates "0,0" to the server when the link is activated.

13.7 Visual representation of images, objects and applets

All the attributes of the IMG and OBJECT elements related to the visual alignment and the view are obsolete , style sheets should be used instead.

13.7.1. Width and height

Attribute definitions

Width = length [CN]
Override the width of the image and object.
Height = length [CN]
Override for image and object.

If the width and height attributes are specified, they inform the user agents that they need to override the original image or object size with these values.

If the object is an image, it is scaled. User agents should best scale the object or image to match the width and height specified by the author. Note that the lengths expressed in percentage depend on the available horizontal or vertical space, and not on the original size of the image, object or applet.

The height and width attributes give user agents an idea of ​​the size of the image or object so that they can reserve the corresponding space and continue generating the document, waiting for the image data.

13.7.2 Space around images and objects

The attributes vspace and hspace define free space on the left and right (hspace) and above and below (vspace) IMG , APPLET , OBJECT . By default, the value of this attribute is not defined, but usually this is a small non-zero value. Both attributes have a length value.

13.7.3 Borders

An image or object can surround a border (for example, if it is specified by the user or the image has the content of element A ).

Attribute definitions

Border = pixels
Undesirable. Атрибут border определяет ширину границы в пикселах. Значение этого атрибута, используемое по умолчанию, зависит от агента пользователя.

13.7.4 Выравнивание

Атрибут align определяет положение IMG , OBJECT или APPLET относительно его содержимого.

Следующие значения атрибута align относятся к положению объекта относительно окружающего текста:

  • bottom: означает, что окно объекта должно быть вертикально выровнено относительно текущей базовой линии. This is the default value.
  • middle: означает, что центр объекта должен быть выровнен вертикально относительно текущей базовой линии.
  • top: означает, что верх объекта должен быть вертикально выровнен относительно верха текущей текстовой строки.

Два других значения, left и right , приводят к перемещению изображения к текущему левому или правому полю. Они обсуждаются в разделе о плавающих объектах .

Различие интерпретаций атрибута align. Агенты пользователей по-разному интерпретируют атрибут align . Некоторые принимают в расчет только текстовую строку, находящуюся перед элементом, некоторые учитывают текст по обеим сторонам элемента.

13.8 Как указать альтернативный текст

Attribute definitions

alt = текст [CS]
Для агентов пользователей, не имеющих возможности вывести изображения, формы или апплеты, этот атрибут определяет альтернативный текст. Язык альтернативного текста определяется атрибутом lang .

Для некоторых нетекстовых элементов ( IMG , AREA , APPLET и INPUT ) авторы должны указывать альтернативный текст, служащий содержимым, если элемент нельзя нормально сгенерировать. Задание альтернативного текста помогает пользователям, не имеющих графических дисплеев, пользователям, браузеры которых не поддерживают формы, visually impaired users, пользователям синтезаторов речи, пользователям, графический агент которых сконфигурирован так, чтобы не выводить изображения и т.д.

Атрибут alt должен быть указан для элементов IMG и AREA . Он не является обязательным для элементов INPUT и APPLET .

В то время как альтернативный текст может быть очень полезным, использовать его нужно осторожно. Авторы должны иметь в виду следующее:

  • Не указывайте несоответствующий альтернативный текст, включая изображения, предназначенные для форматирования страницы, например, alt="red ball" не соответствует изображению, определяющему красный круг для отметки заголовка абзаца. В этих случаях в качестве альтернативного текста следует указать пустую строку (""). Авторам в любом случае рекомендуется не использовать изображения для форматирования страниц; вместо этого следует использовать таблицы стилей.
  • Не указывайте бессмысленный альтернативный текст (например, "dummy text"). Он не только будет frustrate пользователей, но также будет замедлять агенты пользователей, преобразующие текст в речь или текст Бройля.

Информацию об обработке случаев, когда альтернативный текст отсутствует, разработчики могут найти в разделе о генерации альтернативного текста .

Note. Подробнее о создании доступных документов HTML см. [WAIGUIDE] .

Back next content elements attributes index