In this article we will look at a sample chapter from Wrox's HTML 4.01 Programmer's Reference book. This chapter focuses on the HTML object tag and shows a variety of advanced ways to use and manipulate it.
Sample Chapter: HTML 4.01 Programmers Reference - Using the (Page 6 of 10 )
The <object> element is a general-purpose element, designed to insert many different types of content into an HTML document. 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:
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:
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:
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.
Of course, the "proper" way to size an element in HTML 4.01 is to use style sheets to specify the height and width styles. Below, we've used the width attribute in an inline style sheet for brevity. This code produces the same page as above:
<object type="image/gif" data="wroxLogo.gif" style="width:100px; height:100px"> This is our Wrox Logo</object>
However, this doesn't solve the problem of the scroll bars. Resizing the image container so that it fits the image also doesn't solve the problem:
<object type="image/gif" data="wroxLogo.gif" style="width:105px; height:105px"> This is our Wrox Logo</object>
Now the horizontal scrollbar is removed, but the vertical one remains, although it is now inactive:
In Internet Explorer therefore, we can't use images inside the <object> element without incurring an unsightly scrollbar. This makes it unusable until Microsoft updates this.
Netscape 6 and Mozilla render the image correctly without scrollbars, but there is one anomaly in its representation of images in the <object> element. If we resize the image, using a style sheet, Netscape simply sets the image size as the default, ignoring any values set in the style sheet. If we want to stretch the image, as with the <img> element, we must use the height and width attributes:
<object type="image/gif" data="wroxLogo.gif" height="250" width="100"> This is our Wrox Logo</object>