In order to cope with this diversity, the type attribute is used to indicate the type of data the object displays, and the codetype attribute indicates the type of application that implements the display of the data. Of interest to us when working with images, is the type attribute, which is a string description of the content - such as "image/gif" for a GIF image, or perhaps "video/avi" for an AVI video clip. In general terms for types other than video, audio, or text, the application that is required to display the data is defined by "application/<document_type>". In the case of the generic image types, like GIF and JPEG, the browser itself handles the display of the image.

In Windows, a list of all the MIME types supported by your machine can be found in registry under: HKEY_CLASSES_ROOT\MIME\Database\ContentType\, which can be used by all browsers.

Specifying the Data

The data attribute provides the data for the object, either as a URL from where it can be downloaded, or inline as a string of values. As an example, this code will display an AVI file named MyVideo.avi. If the browser doesn't support the <object> element, it will display the text My Video:

<object data="http://mysite.com/video/MyVideo.avi"
   type="video/avi">
My Video
</object>

This is a general example of how we can take advantage of the <object> element as a containing element.

The type attribute, however, is optional; but if it isn't present, then the only way that the browser can be sure of knowing whether it can handle the object is by downloading it first - not all files can be uniquely identified from, say, a file extension. In addition, not all files necessarily have to have the correct extension anyway, and not all systems even use file extensions. By including the type attribute, we can tell the browser exactly what type of file it is. Then, if it can't handle it, it won't waste time and bandwidth downloading it.

Fall Back in Browsers That Don't Support an Object

If the browser recognizes the <object> element, then all well and good - the object will be invoked. However, if it doesn't recognize the <object> element, or can't handle the data that forms the source of the object, we can ensure that an alternative will be displayed.

We can include text and other elements that are only visible on a browser that either doesn't recognize the <object> element, or that can't handle the content type of the data it specifies. We do this by placing text or other elements between the opening and closing <object> tags, and outside any parameter tags. Here's an example:

<object data="http://mysite.com/video/MyVideo.avi"
   type="application/avi">
 <img src="http://mysite.com/stills/MyPicture.gif"
   alt="This is a picture of my dog">
</object>

In this case, browsers that support the <object> element should display a video clip. However, if the browser either doesn't support the <object> element, or can't display AVI files, the viewer will see an ordinary image defined by the <img> element. And if the browser doesn't recognize the <img> element, or can't display the content of it for any reason, the alternative text in the <img> element's alt attribute will be displayed.

Inline Data Definitions for Objects

If the data content of the object is reasonably small, it can be defined by including the data itself in the <object> tag, this is called an inline definition:

<object data="data:application/x-oleobject;3300,FF00,E3A0, ...etc... ">
</object>

This isn't very common as the amount of data needed for inline definition is usually quite impractical.

Inserting Images with an <object> Element

One interesting proposal in HTML 4.01, as we've seen, is the use of the <object> element to embed ordinary graphics files, such as GIF and JPEG files. In its most basic form the use is simple:

<object data="wroxLogo.gif">
</object>

The data attribute works just like the src attribute in an <img> tag, but can also accept inline data where the image is small. This can speed up the time to view of a page, by reducing the number of server connections required:

<object type="image/jpeg"
data="data:image/jpeg;3300,FF00,2756,E5A0,E3A0,22F6, ...etc... ">
</object>

However, unlike the <img> element, which will display a graphic in the browser with this minimal information, this isn't enough for Internet Explorer (versions 4 to 6). It will assume that the height and width settings are set to zero, and we won't see anything, although Netscape 6 and Opera 5.02 will display the graphic quite happily:

By adding the usual width and height attributes common to the <img> element, and adding the MIME type in the type attribute, the image will be displayed in Internet Explorer with the following code:

<object type="image/gif" data="wroxLogo.gif"
  width="100" height="100" >
This is our Wrox Logo
</object>

While adding the height and width now means that we can see the image in Internet Explorer, all is still not well:

Looking at the result, we can see an example of a container with the <object> element. Unlike the <img> element, in Internet Explorer (versions 4 to 6) the <object> element doesn't use the default size of the file to size the container. The height and width we've specified are used to size a frame, which contains the <object> element itself, but not the image. Because it's larger than the available space, the browser automatically adds scroll bars.

Continued...