An image displayed using an OBJECT element can be made sentitive i.e. a mouse click on some part of it can link to another document. This is done by relating the OBJECT element to an image map. An image map is defined by a MAP element ; it delinates areas in the image and associates each area with a hyper link. These are the so called client-side images. Server-side images are not dealt with in this chapter, since they are defined using the IMG element.
1. SAMPLES
1.1 Including an image
Here is an HTML page with an OBJECT element to include an image :
<HTML> <HEAD><TITLE>IMAGE</TITLE></HEAD> <BODY> This is a street scene from Saint Helens, Great Britain, Europe:<br>
| <OBJECT | data="../Images/StHelens.jpg" |
| type="image/jpeg"> |
If the image is correctly referenced, the HTML page would be displayed as something like this:
This is a street scene from Saint Helens, Great Britain, Europe:
1.1.1 Scaling
You can control the image size by using the 'width' or 'height' attribute like this:
<OBJECT data="../Images/StHelens.jpg"
type="image/jpeg"
width="250"
>
The image is a street scene
</OBJECT>
To see the result, please click here. Hopefully, you know how to get back from the image.
You have to redefine only one of the dimensions, the other will automatically adjust. If you redefine both, the image can be deformed if the specified width and height are not in the same proportion as in the original image.
Beware: some of the older browsers do not support the <OBJECT> element very well, and do not scale the image to the specified size. They simply set up a frame with the specified dimensions and put the image in it, with scroll bars if needed to move the image about (With Internet Explorer 6.0, you have also to specify both dimensions). If you are in this case, please click here to see the scaling effect (the page uses the deprecated <IMG> element.)
1.1.2 The attributes
The attributes used in the OBJECT element are:The value of the 'data' attribute is an URI that identifies the file containing the image. Using an URI of the form "http://www.host.domain/path", you can identifiy an image anywhere in the Web.
The 'type' attribute is optional. It identifies the type of the data referred to by the data attribute. Using the 'type' attribute helps the browser determine if it can handle the referenced type of data and save a downloading of the data if it cannot.
1.1.3 The content
The browser will first try to render the image identified by the 'data' attribute. If it succeeds, the processing of the OBJECT element is done. Otherwise, the content of the element (i.e. the text lying between the <OBJECT> and the </OBJECT> tags) is displayed at the location of the OBJECT element. Here the content is 'The image is a street scene'.1.2 Scheduling an applet
Here is an HTML page with an OBJECT element that schedules an applet :<HTML> <HEAD><TITLE>APPLET</TITLE></HEAD> <BODY> Yin and Yang are the principles that run the World. They materialize in the 0's and 1's that compose all our thoughts :)
| <OBJECT | classid="java:applet/demo.xyza.YinYang" |
| codetype="application/java" | |
| width="150" | |
| height="150" |
The applet will run in a 150 by 150 pixels square area.
To see how it works, please click here (when on the applet page, you can select "Page Source" on the "View" menu, to view the HTML source code -- if the applet is not scheduled, please see 1.2.6 below).
1.2.1 The applet
A square area of 150 x 150 was allocated to the applet. The latter displays an rotating yin-yang disc (the definition of which is what you see on the page.)1.2.2 The attributes
The attributes in use are:The classid attribute identifies the applet to be scheduled. The value of this attribute is a character string that starts with the key-word "java:" to indicate that a Java applet is identified. The terminating colon of this word is immediately followed by the full name of the applet. The full name is the name complete with the package identifiers.
As to the placement of the applet, two conditions must be met:
| 1. | The classpath environment variable must point to the directory that contains the directory path of the applet. This is a JAVA rule. In the figure on the left, the applet is in file YinYang.class; its full name is demo.xyza.YinYang. The classpath variable must point to the directory labelled as "HOME" in the figure.
In a Windows system, to achieve this, you can add the following line to the
|
|
2. | The applet must be descended from the directory that contains the HTML page. |
The codetype attribute has the value 'application/java' to signal a Java application.
The values of the width and height attributes define the width and height, in pixels, of the area allocated to the applet. The Java code in the applet says where in this area graphics if any are to be displayed. If this area is smaller than the graphics, part of the latter will be invisible.
1.2.3 The PARAM elements
The <PARAM> elements define the data made available to the applet. They come first in the content of the OBJECT element (this is a general rule).
In the <PARAM name="radius" value="50" >
| - | the name attribute defines a String variable whose name is 'radius' |
| - | the value attribute assigns the String '50' as a value to this variable |
String ray = getParameter("radius");
Obviously the author of the HTML page must be acquainted with the names used in the applet and their significance (or the applet author must be acquainted with the names used in the HTML page!). The value retrieved is always a String. If it represents a number, it is up to the applet to do the necessary transformation.
The value "AAFFAA" for the 'colour' variable is a so called RGB (Red Green Blue) color ; this value combines hexadecimal AA (which is decimal 170) part of red, FF (255) part of green and AA part of blue to produce the pale green that you see.
1.2.4 The PARAM element contents
The PARAM elements are part of content of the OBJECT element, and come first. Behind comes the text to be displayed by the user agent (e. g. the browser) when it cannot render the information defined by the attributes in the tag.1.2.5 Why the applet is not scheduled
If the browser does not support OBJECT, normally it would display the text in the content of the element. If the area allocated to the applet is displayed but the applet seems not to be scheduled, it is most likely that the OBJECT element is supported, but something is wrong :| - | the applet is required to be contained in or descended from the directory containing the HTML page |
| - | you forgot the package names in the applet identification |
| - | no classpath points to the directory just above the path to your applet |
| - | some PARAM element is missing or wrong |
1.2.6 The APPLET element
If your browser cannot process the OBJECT element (which is somehow 'recent'), you can still use the deprecated APPLET element. The APPLET element to schedule the above YinYang applet is :
<APPLET code=demo.xyza.YinYang.class
width="150"
height="150"
>
<PARAM name="radius" value="50">
<PARAM name="colour" value="AAFFAA">
</APPLET>
To see that it works please click here -- be patient, it can take time1.3 Inserting a document
Here is an example of using the OBJECT element to include another document into the HTML page
<HTML>
<HEAD><TITLE>Henry D. Thoreau</TITLE></HEAD>
<BODY>
<p class="img50">
Practical philosopher, naturalist, poet, Henry David Thoreau (1817-1862)
has inspired generations of readers. "Civil disobedience" presents his view
on authority. This is the most influential of his essays.
<OBJECT data="TEXTThoreau.html"
width="350">
This is a text by Henry D. Thoreau
</OBJECT>
</p>
</BODY>
</HTML>
The result would look like this:
Practical philosopher, naturalist, poet, Henry David Thoreau (1817-1862) has inspired generations of readers. "Civil disobedience" presents his view on authority. This is the most influential of his essays.
The text on white background is from the base HTML page. The text on green background comes from the inserted document.
1.3.1 The scroll bar
If the allocated area is sufficient to hold the entire document, the scroll bar is not necessary and may be omitted (depending on the browser).For example, with this
Practical philosopher, naturalist, poet, Henry David Thoreau (1817-1862) has inspired
generations of readers. "Civil disobedience" presents his view on authority. This is
among the most influential of his essays.<OBJECT data="TEXTThoreau.html"
width="750"
height="350">
This is a text by Henry D. Thoreau
</OBJECT>
the allocated area will hold the page entirely.
To see the result please click here
1.3.2 The attributes
The attributes in use here are :By omitting the width and the height attributes, you can see what are the default values for these attributes. They are different with different browsers.
Here is an HTML page that displays a sensitive image.
<HTML>
<HEAD><TITLE>THE COCK</TITLE></HEAD>
<BODY>
<MAP name="cock">
<AREA shape="circle" coords="96,90,20" href="ILLcock.html">
<AREA shape="rectangle" coords="70,0,158,30" href="../Images/Hose-pipe.bmp">
<AREA shape="polygon" coords="150,0,170,0,225,192,192,192" href="../Images/bamboos.jpg">
</MAP>
<OBJECT data="../Images/cock.jpeg"
width="250"
height="192"
usemap="#cock"
>
A cock
</OBJECT>
</BODY>
</HTML>
1.4.1 The MAP element
The MAP element contains a number of AREA elements each of which defines a geometrical area by its coordinates in number of pixels, relative to a rectagular area containing an image. The x-coordinate axis is horizontal and pointing to the right ; the y-coordinate axis is vertical and pointing downward.
Such an area is called a region. In the above:
| - | the first region is a circle with center at x=96, y=90 pixels from the upper left corner of the image, an radius of 20 pixels; clicking in this region will link to the document "ILLCock.html" |
| - | the second region is a rectangle with one corner at x=70, y=0 and the diametrically opposite corner at x=158, y=30; clicking in this region will link to the document "../Images/Hose-pipe.bmp" |
| - | the third region is a polygon with vertices at coordinates x=150, y=0; x=170, y=0; x=225, y=192; x=192, y=192; clicking in this region will link to the document "bamboo.jpeg", in the directory "images" which is in the same directory as the directory where the present document is. |
The OBJECT element inserts an image in the page. Its usemap attribute maps a MAP element onto it. The value of the usemap attribute is the identifier of the MAP element as defined by the name attribute of the latter.
The page displays like this:
1.4.2 Using the IMG element
If you use an older browser, it may not support the <OBJECT> very well and does not scale the image. In this case, please click here to try and get a correctly scaled image (the referenced page uses an <IMG> element).1.4.3 Mapping onto the image
The sensitive areas are ideally mapped onto the image, but cannot be seen. What is important to the user is that they roughly correspond resp. to the cock, the hose-pipe coil and the bamboo stalk.Letting the mouse cursor hover above the area will cause the URI of the associated document to be displayed on the status bar of the page.
Beware: in order to map the geometrical areas preciseley onto elements of the image, you must know the precise pixel dimensions of the latter. The easiest way to achieve this is to determine these dimensions using the width and height attributes as in the above. But you must have a browser that support image scaling through these parameters. Or else you must use the image in its original dimensions.
1.5 Sensitive image with apparent links
In the foregoing example, the links to the target documents can not be seen (except on the status bar when you let the cursor hover over the concerned regions).1.5.1 The sample page
Here is a page demonstrating a mapping technique where the links are visible.
<HTML>
<HEAD><TITLE>SOUTH EAST ASIA</TITLE></HEAD>
<BODY>
<MAP name="se_asia">
<P>
These are the countries to the South-East of Asia - you can click on their
location to display their enlarged maps:<br>
<A href="../Images/map-brunei.gif"
shape="circle"
coords="236, 300, 8">Brunei</A><br>
<A href="../Images/map-easttimor.gif" shape="rectangle"
coords="326,402, 343,416">East Timor</A><br>
<A href="../Images/map-singapore.gif" shape="polygon"
coords="153, 325, 147, 328, 151, 332, 157, 329">Singapore</A><br>
<A href="../Images/map-australia.gif"
shape="polygon"
coords="462,432,457,545,225,545,360,440">Australia</A><br>
<A href="../Images/map-burma.gif"
shape="polygon"
coords="96,108,124,171,115,172,93,192,114,252,99,282,105,261,
69,219,53,177">Burma</A><br>
<A href="../Images/map-cambodia.gif"
shape="polygon"
coords="159,227,177,226,177,247,150,256,135,238,141,227">Cambodia</A><br>
<A href="../Images/map-indonesia.gif"
shape="polygon"
coords="78,296,96,298,144,335,192,328,201,337,234,331,
245,307,351,325,457,364,457,412,
156,420,66,307">Indonesia</A><br>
<A href="../Images/map-laos.gif"
shape="polygon"
coords="135,160,177,220,177,226,159,227,165,210,147,191,
125,199,126,179,115,172">Laos</A><br>
<A href="../Images/map-malaysia.gif"
shape="polygon"
coords="116,288,135,290,148,305,153,325,
252,287,273,297,258,315,
245,307,234,331,201,337,192,328,
147,328,132,320">Malaysia</A><br>
<A href="../Images/map-papua.gif"
shape="rectangle"
coords="457,364,469,412">Papua New Guinea</A><br>
<A href="../Images/map-philippines.gif" shape="rectangle"
coords="282,192,335,298">Philippines</A><br>
<A href="../Images/map-thailand.gif"
shape="polygon"
coords="115,172,126,179,125,199,147,191,165,210,159,227,
141,227,135,238,116,288,99,282,114,252,93,192">Thailand</A><br>
<A href="../Images/map-vietnam.gif"
shape="polygon"
coords="135,160,159,154,180,169,195,247,160,280,150,256,
177,247,177,220">Vietnam</A>
</P>
</MAP>
<OBJECT data="../Images/se_asia.art"
width="520"
height="600"
usemap="#se_asia"
>
S.E Asia map
</OBJECT>
</BODY>
</HTML>
1.5.2 Wrapped <A> elements
The OBJECT element references the MAP object using the usemap="#se_asia" attribute whose value is the MAP identifier as defined by the name attribute in the MAP start tag.The <A> elements in the content of the <MAP> element define the geometric areas to be mapped onto components of the image.
The components here are the countries on the map of South East Asia.
There are 12 of the <A> elements, which is quite a lot for an introductory example. But these elements are very similar so that you have to look at very few of them to understand them all.
The <A> element here contains 3 attributes:
| href | specifies the URI of the file associated with the area -- the document in the file will be linked to when the area is clicked | ||||||||||
| shape | specifies the shape of the area, which can be polygon, circle or rectangle
| coords | specifies the pixel coordinates of the geometric figure:
|
|
1.5.3 The enclosing paragraph block
Most important is the <P> element that encloses all of the <A> elements. That is the <P> element that comes just after the <MAP name="se_asia> start tag; if you forget it, the image will not be sensitive.
The <P> tag starts a paragraph block. In the example the block end is marked by a </P> tag; this tag is optional, you can omit it.
1.5.4 Displaying the page
1.5.5 Clicking on the sensitive image
The map is of South East Asia. This map along with the enlarged maps, to be used in its connection, are retrieved from the US Government site http://www.odci.gov/cia/publications/The list of links is displayed at the location where the MAP element was placed, in this instance at the top of the page. When the OBJECT element is correctly supported:
| - | Clicking on an entry of the list will not link to the document concerned, but to the image (please try it). |
| - | By clicking on a country on the geograpic map, you have the enlarged map of the country displayed. |
1.5.6 Precedence rule when areas overlap
You can notice that the links to Brunei, East Timor and Singapore are shifted up to the top of the list. This is because their associated areas overlap with nearby larger areas ; when areas overlap, the one whose description comes first takes precedence.1.5.7 Links can be visible or concealed
You can also have the list of links concealed, by putting the MAP element in the content of the OBJECT element, as in the following example:
<HTML>
<HEAD><TITLE>SOUTH-EAST ASIA</TITLE></HEAD>
<BODY>
This is the map of South-East Asia. You can click on <b>Singapore</b>,
<b>Papua New Guinea</b>, <b>East Timor</b> or <b>Brunei</b> to see their flags.<p>
<OBJECT data="../Images/se_asia.art"
width="520" height="600"
usemap="#concealed"
>
<MAP name="concealed">
<P>
<A href="../Images/flag-brunei.gif" shape="circle"
coords="236, 300, 10">Brunei</A><br>
<A href="../Images/flag-easttimor.gif" shape="rectangle"
coords="326,400, 343,416">East Timor</A><br>
<A href="../Images/flag-singapore.gif" shape="polygon"
coords="155, 327, 145, 332, 150, 336, 158, 331">Singapore</A><br>
<A href="../Images/flag-papua.gif" shape="rectangle"
coords="457,364,469,412">Papua New Guinea</A><br>
</MAP>
S.E Asia map
</OBJECT>
</BODY>
</HTML>
Note that although the MAP is within the OBJECT element content, the usemap attribute is still needed. The content of the MAP element does not show.
To see how the page is displayed please click here
2. USAGE
The OBJECT element is used to insert an object into an HTML page. Instances of such objets are :2.1 Object placement
Visual objects defined by the OBJECT element (which include images) or images defined by the IMG element can be placed in the page for optimum effect using the general techniques available to place blocks of visual data.One of these is the float property specified in a style sheet. Here are some examples:
An object can be 'floated' to one side of the page, using the float property assigned a value:
<STYLE>
object.left {float: left; margin-right: 0.5em; margin-top: 0.5em;}
object.right {float: right; margin-left: 0.5em; margin-top: 0.5em;}
img.left {float: left; margin-right: 0.5em; margin-top: 0.5em}
img.right{float: right; margin-left: 0.5em; margin-top: 0.5em}
p.title {font-size: 150%; color: #AA1133; font-weight: bold;}
</STYLE>
| object.left | defines the properties of all <OBJECT> elements (HTML is essentially case insensitive) which have the attribute class="left"
| ||
| These properties are: | |||
| float | with the value "left" (float: left;)
| ||
| - | this means that the visual object (image or text block) is to be 'floated' to the left, from where the <OBJECT> is inserted, and the remaining text is to flow to its right | ||
| margin-right | with the value "0.5em" (margin-right: 0.5em;)
| ||
| - | this means that the right margin of the object is to have width of 0.5 times the height of a line -- as the object is set to the left border of the page, text will flow to its right, therefore a right margin is useful | ||
| margin-top | with the value "0.5em" (margin-top: 0.5em;)
| ||
| - | this means that the top margin of the object is to have width of 0.5 times the height of a line -- this is to prevent the object from being to close to the line above it (the line below has its own top-margin) | ||
| object.right | defines the properties of all <OBJECT> elements) which have the atribute class="right"
| ||
| The properties defined are similar to those of "object.left" | |||
| img.left | defines the properties of all <IMG> elements) which have the atribute class="left"
| ||
| The properties defined are similar to those of "object.left" | |||
| img.right | defines the properties of all <IMG> elements) which have the atribute class="right"
| ||
| The properties defined are similar to those of "object.left" | |||
| p.title | defines the presentation properties of all <P> elements which have the atribute class="title"
| ||
| This is similar to the example in the Starter document | |||
| <tagname style="float:option"> |
tagname is the tag name of an elementoption is one of left or right 2.1.2 Placing images, assigning values in a style sheet
An example of the placement of image is this :
<HTML>
<HEAD>
<TITLE>SHELTER</TITLE>
<STYLE>
object.left {float: left; margin-right: 0.5em; margin-top: 0.5em;}
object.right {float: right; margin-left: 0.5em; margin-top: 0.5em;}
img.left {float: left; margin-right: 0.5em; margin-top: 0.5em}
img.right{float: right; margin-left: 0.5em; margin-top: 0.5em}
p.title {font-size: 150%; color: #AA1133; font-weight: bold;}
</STYLE>
</HEAD>
<BODY>
<center><p class="title">SHELTER</p></center>
Probably man did not live long on the earth without discovering the convenience which there
is in a house, the domestic comforts, which phrase may have originally signified the
satisfaction of the use more than of the family; <OBJECT class="left"
data="../Images/Wigwams.bmp">Wigwams</OBJECT>though these must be extremely partial and
occasional in those climates where the house is associated in our thoughts with winter or the
rainy season chiefly, and two thirds of the year, except for a parasol, is unnecessary. In our
climate, in summer, it was formerly almost solely a covering at night. In the Indian gazettes
a wigwam was the symbol of a day's march, and a row of them cut or painted on the bark of a
tree signified that so many times they had camped. Man was not made so large limbed and robust
but that he must seek to narrow his world, and wall in a space such as fitted him. He was at
first bare and out of doors; but though this was pleasant enough in serene and warm weather,
by daylight, the rainy season and the winter, to say nothing of the torrid sun, would perhaps
have nipped his race in the bud if he had not made haste to clothe himself with the shelter
of a house.<IMG class="right" src="../Images/WinterHouse.bmp">.
<p>
We may imagine a time when, in the infancy of the human race, some enterprising mortal crept
into a hollow in a rock for shelter... From the cave, we have advanced to roofs of palm leaves,
of barks and boughs, of linen woven and stretched,of grass and straw, of boards and shingles,
of stones and tiles.
<p>
<b>Henri D. Thoreau</b>
<br>
From <i>Walden or life in the woods</i>
</TABLE>
</BODY></HTML>
The inserted HTML elements that represent images are made to stand out in blue.2.1.3 Placing a text block, using the style attribute
This is an example of text placement. The HTML element that defines the inserted document stands out in blue.
<HTML>
<HEAD>
<TITLE>Henry D. Thoreau</TITLE>
</HEAD>
<BODY>
Henri D. Thoreau was born on July 12th, 1817, in Concord, Massachussett. His father was a
minor businessman of that town.<br>
<OBJECT style="float:right"
data="TEXTThoreau.html"
width="350"
height="250">
This is a text by Henry D. Thoreau
</OBJECT>
He was educated at Harvard. After graduating 1n 1837, at the age of 20, he began an
unsuccessful career of school teaching. His experience with nature in the raw, derived from
a canoe trip on the Merrimack and Concord rivers in 1839 left him with a profound impression
which was the starting point of his natural philosophy.<br>
He was a Trancendentalist and a friend of Ralph W. Emerson.<br>
For two years, from July 1845 to September 1847 he lived in a cabin that he built by his
own hands, on the shores of Walden Pond, on land owned by Emerson.<br>
<i>Walden; or life in the wood</i>, his masterwork was the product of this experience.
<br>
Later, he became more involved in politics. As a result of his opposition to the Mexican War
(1846-1848) and his one night imprisonment for refusing to pay his poll tax in protest, he
produced the essay on "<i>Civil Disobedience</i>".<br>
His activism in the antislavery struggle resulted in some of his most celebrated essays.
</p>
</BODY>
</HTML>
To see the presentation of this page, please click here.2.2 Margins and borders
Images and general objects as defined by the <IMG> and <OBJECT> elements can be given margins and borders by properties in a CSS style sheet.
2.2.1 Margins
| - | margin-top | assigns a value to the top margin of the object |
| - | margin-right | assigns a value to the right margin of the object |
| - | margin-bottom | assigns a value to the bottom margin of the object |
| - | margin-left | assigns a value to the left margin of the object |
| - | margin | assigns the same value to all the margins of the object |
| values can be define in number of pixels or in term of line height (em) -- examples are shown above. | ||
2.2.2 Borders
Borders are defines by the following properties:| - | border-top | defines the appearance (width, style and color) of the top border of the object |
| - | border-right | defines the appearance (width, style and color) of the right border of the object |
| - | border-bottom | defines the appearance (width, style and color) of the bottom border of the object |
| - | border-left | defines the appearance (width, style and color) of the left border of the object |
| - | border | assigns the same appearance to all the borders of the object |
An example is: object.bordered {border: thick solid red; }.
| ||
2.3 Image handling
2.3.1 Supported formats
The Netscape or Internet Explorer browsers support a variety of image formats, notably those implied by the following file name extensions: - art,2.3.2 Image scaling
Image scaling is achieved by means of the width and height attributes:When these attributes are not specified, the image is displayed in its original pixels dimensions.
When specified, they set the dimensions of the rectangle allocated to the image.
Browsers that do not support the OBJECT element well may not be capable of scaling (en the image is defined by an OBJECT element). Some, like Internet Explorer 5.x allocates a view window of the specified dimensions, and sets up the necessary scroll bars to scroll the image within the window.
Netscape 7.1 does scale the image, i.e. it reduces or enlarges each dimension of the image to bring it to the desired width and height. You need specify only one of the dimensions, the other is automatically adjusted to preserve the original proportion. By specifying both dimensions,you can deform the image.
2.4 Sensitive images
Sensitive images can be client side or server side. They differ by how a mouse click is processed:| - | a click on a client side image is processed by the browser at the client machine, which links to the target document as specified by the href attribute of the concerned <AREA> or <A> element. |
| - | a click on a server side image causes the coordinates of the clicked point to be sent to a processing agent on the server side. |
Client side sensitive images were demonstrated in paragraphs 1.4 and 1.5 above.
Server side images can only be defined using the <IMG> element. To that end, an ismap boolean attribute is coded into the <IMG> tag. No map is to be defined, since the whole image is sensitive: a click anywhere on the image will cause the coordinates of the point clicked on to be sent to the server. Example:
<IMG src="../Images/Birmingham.jpeg" ismap alt="A house in Birmingham">
Please click here for more.
3. ELEMENT SYNTAX
3.1 The element structure
The general arrangement of an <OBJECT> element is:| - | the start tag contains attributes that define the object to be inserted. For instance : | ||||||
<OBJECT data="../Images/scene.jpg">
| |||||||
| defines the image to be inserted by specifying its URI | |||||||
| - | the content of the element holds the fall back information to be displayed if the user agent cannot render the object specified in the start tag. Here is a simple example : | ||||||
|
| - | <MAP> elements |
| - | <PARAM> elements |
3.2 Attributes
3.2.0 Attribute overview
The OBJECT element has the attributes that are shared by almost all elements. Please click here to see them.
In addition, the following attributes are available (deprecated attributes are not described - you can use style properties to achieve their results):
| Specific attributes | ||
| - | declare | Code: declare - with no value -- specifies that the OBJECT element is a declaration, not to be rendered at the location where it is coded, but to be referred to, e.g. by an <A href=...> element, from another location in the page. This allows multiple occurrences of the same element in different locations.
|
| - | data | Code: data=uri - identifies the object by its URI. This attribute is used e.g. for images or text blocks.
|
| - | classid | Code: classid=uri - identifies the object by its URI. This can be a resource identified by a URL in the form "http://host/path", or a Java applet identified by its full name (complete with package identifiers) as "java:package.class_name".
|
| - | codebase | Code: codebase=uri - specifies the URI base used to resolve relative URI's found in the value of the classid, data or archive attributes.
|
| - | codetype | Code: codetype=contentType - specifies the MIME type of the data contained in the object referred to by the classid attribute. This attribute is optional but useful as it helps the browser refrain from wasting its time loading data of a type that it does not support.
|
| - | archive | Code: archive=uri-list - specifies a list of space separated URIs that identify archives containing resources relevant to the object ; in the Java connection these archives would be jar files that contain classes called by the applet
|
| - | usemap | Code: usemap=cdata - used only with an OBJECT element that defines an image -- identifies a map that makes the image sensitive
|
| - | standby | Code: standby=text - specifies a message that the user agent (the browser) may display while loading the object and its related data
|
| Common attributes | ||
| - | height | Code: height=length - sets the height of the rectangular area where the object is to be rendered
|
| - | width | Code: width=length - sets the width of the rectangular area where the object is to be rendered
|
| - | name | Code: name=cdata - assigns a control name to the OBJECT when this is part of a form
|
| - | tabindex | Code: tabindex=number - assigns a tabbing order to the OBJECT when this is part of a form
|
3.2.1 The declare attribute
The declare attribute has no value. When present, it indicates that the OBJECT is a declaration, not to be rendered at the location where it is coded. The defined object is inserted at the location of another OBJECT element that refers to it.3.2.2 The data attribute
The data attribute specifies the URI of a file that contains the data that constitutes the object defined by the OBJECT element. The data attribute is used notably in defining images of text blocks to be inserted in the document.3.2.3 The classid attribute
The classid attribute specifies the URI of the object defined by the OBJECT element -- it is an alternative to the data attribute (some type of object, such as applets, requires a classid attribute, some, such as images, the data attribute)3.2.4 The codebase attribute
The codebase attribute is a URI that serves as the URI base to resolve the relative URIs specified in the classid, data or archive attribute of the element; by defaut these relative URIs are resolved using the URI base of the current document (which usually the URI of its directory).3.2.5 The codetype attribute
The codetype element specifies the MIME type of the data contained in the object specified by the OBJECT element. This attribute is optional, but it helps the browser determine if it can process the object, and save an improductive loading of the object if it cannot.3.2.6 The archive attribute
The value of the archive attribute is a space separated list of URIs that locate the jar files that contain the resources related to the object; these resources are for instance classes that are called by the applet specified in the classid attribute. Specifying the location of the jar's causes the browser to load them in advance; this can saves the awkardness of loading these resources while conversing with the user.3.2.7 The usemap attribute
The usemap attribute is used only with an <OBJECT> element that defines an image; it specifies the name (as defined by the name attribute) of the map that causes the image to be sensitive. The value of the usemap attribute is the name as specified by the name attribute of the MAP element, preceded by the "#" sign.3.2.8 The standby attribute
The standby attribute specifies a message that the user agent may display while loading a large object file.3.2.9 The width and height attributes
The width and height attributes specify the width and height of the visual object defined by the <OBJECT> element. Some of the units that can be used to these dimensions are:| - | number of pixels -- the values are integerswidth=300 height="250"
|
| - | percentage of currently available space -- the values are integer or real numbers followed by the "%" sign, without intervening space:width=120% height="150%"
|
| The W3C recommendation on HTML 4.01 states that when width and height are specified, the image is to be scaled to the specified dimensions. | |
3.2.10 The name attribute
The name attribute specifies the name of the object when this is used as a control in a FORM element.3.2.11 The tabindex attribute
The tabindex attribute specifies the rank of the object in a tabbing navigation.4. ADVANCED TOPICS
Embedded documents
An external document referenced by an <OBJECT> element is displayed in the space explicitely or implicitely allocated by the element's attributes. But it is not included (displaying the document source using the "View" menu does not show it).