HTML Objects

Overview:

Attributes:

• CLASSID [optional]
  • Specifies the relative path to the objects class/object file. In the case of a JAVA applet, you would specify the path the class file like this: classid="java:myclass.class"
  • Note: This attribute is not compatible with Internet Explorer 6. For some reason, I found that I needed to specify the CODE attribute instead of the CLASSID attribute. (code="myclass.class")
• CODEBASE [optional]
  • The default base path used to reference the object. All references to files are relative to this value. For example, the following code will set my base directory to the source code directory on my account. codebase="http://www2.hawaii.edu/~justinhi/source_code/"
  • The default value for this attribute is the current directory of the HTML file.
• CODE [required for Internet Explorer browsers]
  • This is not an official attribute of the W3C, but is needed when writing code for the Internet Explorer 6 browser. This attribute works in the same fashion as the CLASSID attribute except that there is no need to specify the type of file.
• 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" This value defaults to the content-type specified by the TYPE attribute.
• DATA [required when <object> refers to an image]
  • 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.
• 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 Content-type value, the HTTP value takes precedence. Click here for a listing of the different content-types.
• ARCHIVE [optional]
  • List of paths, delimited by spaces, to the resources specified by the DATA and CLASSID/CODE attributes.
• DECLARE [optional]
  • Boolean attribute that makes the current object a declaration. This allows future use of the object later on in the document. Remember that you must specify and ID when using this attribute.
• STANDBY [optional]
  • User defined text message to display while waiting for the current object to be rendered.

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 designer should make. Only the <applet> tag should not be used since it is deprecated. The nice thing about the <object> tag is the ability to nest. This feature comes in handy when a browser cannot display the intended object. In this case, the next nested object would be executed. It's like a nested if,else programming statement.

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 probably 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 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've discovered that Opera 6 displays every object on this page and therefore makes it the most compatible HTML browser I ever used.

One great advantage of the <object> tag is the ability to declare 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 on in your HTML document.

Examples:

Keno

Screen Shot	Keno 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="Keno.class"
        width="450" height="300"
        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 displays the text "Applet cannot be loaded. Not using Netscape compatible browser." This is one of the advantages of using <object> tags. This example will display an error 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	Keno 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:Keno.class"
        width="450" height="300"
        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 (which is a W3C standard) attribute is used for non-IE browsers and the CODE (not a W3C standard) attribute is used by IE browsers. The other difference is the way the CODEBASE attribute is specified. This example uses a relative path to 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 Keno applet should look like in an Opera browser.

Star Image [Internet Explorer version]
Screen Shot	Image
Screen Shot	Image
[Netscape/Opera version]
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 IE 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]

ICS 415 | Topic Notes | Assignments | Feedback | Links

Last Updated: January 31, 2002