HTML Objects

<object>

Contents:

1.0 Overview

2.0 Attributes

2.1 CLASSID
2.2 CODEBASE
2.3 CODE
2.4 CODETYPE
2.5 DATA
2.6 TYPE
2.7 ARCHIVE
2.8 DECLARE
2.9 STANDBY

3.0 Design Tradeoffs

4.0 Examples

4.1 Example 1.0
4.2 Example 1.1
4.3 Example 1.2

 

1.0 Overview:

2.0 Attributes:

2.1 CLASSID [optional]

Specifies the relative path to the objects class/object file. In the case of a JAVA applet, you would specify the path of the class file like this: classid="java:myclass.class"


Note: This attribute is not compatible with Internet Explorer browsers. I found that I needed to specify the CODE attribute instead of the CLASSID attribute: code="myclass.class"

2.2 CODEBASE [optional]

The default base path used to reference the object. All references to files are relative to this attributes value. For example, the following code will set my base directory to the source code directory on my uhunix account. codebase="http://www2.hawaii.edu/~justinhi/source_code/"

The default value for this attribute is the current directory of the HTML file.

2.3 CODE [required for Internet Explorer browsers]

This is not an official attribute of the W3C, but is needed when writing HTML for Internet Explorer browsers. This attribute works in the same fashion as the CLASSID attribute except there is no need to specify the file type. Here is an example: code="myclass.class"

2.4 CODETYPE [required when CLASSID/CODE is specified]

The content-type of the data specified by the CLASSID or CODE attributes. For example, a JAVA applet would have the following CODETYPE: codetype="application/java"

The default value for this attribute is the content-type specified by the TYPE attribute.

2.5 DATA [required for certain <object> types]

Specifies the relative path to the object's data file. In the case of an image, this is the path to the image file. This attribute works similarly to the CLASSID/CODE attributes. It can be a relative or absolute path. Here's an example using a relative path: data="images/mypic.jpg"

2.6 TYPE [optional]

The content-type of the data specified by the DATA attribute. If this value conflicts with the content-type specified by the HTTP (HyperText Transfer Protocol) content-type value, the HTTP value takes precedence. Here's an example: type="image/jpeg"

2.7 ARCHIVE [optional]

List of paths, delimited by spaces, to the resources specified by the DATA and CLASSID/CODE attributes. Since most archives are compressed, loading times will be shorter. Here's an example: archive="myArchive.jar"

2.8 DECLARE [optional]

Boolean attribute that makes the current object a declaration. This allows future use of the object later in the document. You must specify and ID when using this attribute. Here's an example: declare id="myID"

2.9 STANDBY [optional]

User defined text message to display while waiting for the current object to be rendered. Here's an example: standby="Please wait while loading image..."

3.0 Design Tradeoffs:

The <object> tag can be used to replace the <applet> (Example 1.0 and Example 1.1), <img> (Example 1.2), and <iframe> tags, but it is a decision that the web designer should make. Only the <applet> tag should not be used since it is deprecated.

The nice thing about the <object> tag is its ability to be nested. This feature is useful when a browser cannot display the intended object. In this case, the browser will try to render the object at each nested level. It's like a nested if,else programming statement. If all the nested objects cannot be rendered, it is good practice to add alternate text to be displayed to the user. The examples in this topic note include alternate text.

You will not loose many of the features available in the <img> and <iframe> tags by switching over to <object> tags. In fact, it is to your advantage to switch over because of the versatility that the <object> tag has to offer. Also, the <img> and <iframe> tags may soon be deprecated by the W3C just as the <applet> tag was. One word of caution: there seems to be a lot of incompatibility and inconsistency with the <object> tag when using different browsers. Netscape and Opera seem to adhere to the W3C specifications, but Internet Explorer seems to be in their own world. I discovered that Opera 6 displays every object on this page and therefore makes it the most compatible HTML browser.

One great advantage of the <object> tag is the ability to declare (via the DECLARE attribute) your objects at the beginning of the HTML page and assign it an ID. You then have the ability to use this ID like a function call later in your HTML document.

4.0 Examples:

Hello World

Screen Shot	Hello World Applet
Example 1.0

Here's the <object> portion of the HTML code that generated Example 1.0:

<object codetype="application/Java"
        codebase="http://www2.hawaii.edu/~justinhi/applet/"
        code="Hello.class"
        width="150" height="100"
        standby="Please wait...">
	    <! -- Display the following text if object cannot be rendered -->
        Applet cannot be loaded. Not using IE compatible browser.
</object>

This example does the same thing the <applet> tag does except using the <object> tag. Notice how the second to the last line of the code displays the alternate text "Applet cannot be loaded. Not using Internet Explorer compatible browser." This is one of the advantages of using <object> tags. This example will display a message to the right of the screen shot if using a non-Internet Explorer browser. Otherwise the applet should look similar to the one in the screen shot.

Screen Shot	Hello World Applet
Example 1.1

Here's the <object> portion of HTML code that generated Example 1.1:

<object codetype="application/Java"
        codebase="../../applet"
        classid="Java:Hello.class"
        width="150" height="100"
        standby="Please wait...">
          <! -- If this doesn't work then just print a message.
              The codebase attribute could also be a valid URL --> Applet is not 
          working. Please use a Netscape compatible browser.
</object>

This example is similar to Example 1.0 except that it is designed for non-Internet Explorer browsers. The difference is the CLASSID and CODE attributes. The CLASSID (a W3C standard) attribute is used for non-Internet Explorer browsers and the CODE (not a W3C standard) attribute is used by Internet Explorer browsers. The other difference is the way the CODEBASE attribute is specified. This example uses a relative path from the current HTML page to point to the directory that contains the JAVA class file. Example 1.0 uses an absolute path instead. The screen shot displays what the Hello World applet should look like in an Opera browser.

Star Image [Internet Explorer version]
Screen Shot	Image
[Netscape/Opera version]
Screen Shot	Image
Example 1.2

Here's the <object> HTML code that generated Example 1.2.

<object data="http://www2.hawaii.edu/~justinhi/images/one_star.gif" 
        height=50 width=75 
        type="image/gif">
        <! -- Display this message if pic not found
              This works for Internet Explorer, Netscape, and Opera 6.0 -->
		Image cannot be found
</object>

<object data="http://www2.hawaii.edu/~justinhi/images/one_star.gif" type="image/gif">
        <! -- Display this message if pic not found
              This works for Netscape and Opera -->
        Image cannot be found
</object>
        

Example 1.2 should display an image of a single blue star. If you cannot see either image, you are using a browser other than Netscape, Opera, or Internet Explorer. The top image should be seen by any browser, but the bottom image will not work in Internet Explorer browsers because the height and width attributes are not specified. If you are using an Internet Explorer browser, you should not be able to see the Netscape/Opera image of the star. However, if you are using a Netscape or Opera browser, you should be able to see both star images.

[View Feedback on this topic] [View Original Object Topic Note]

ICS 415 | Topic Notes | Assignments | Feedback | Links

Last Updated: February 15, 2002