HTML 4.01 Programmer's Reference
|
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:
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:
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:
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>
|
This would then stretch the image to fit:
Hidden Image Elements
We can also specify other style properties, for example this code:
loads the image into the <object> element on the page, but makes it invisible.
While it may seem a little pointless, it is a good way to get the browser to cache
images that we want to make available quickly, such as rollovers – like a
rotated ad, or a series of frames of animation in an animated-GIF. When the image
needs to be displayed, it doesn't need to be downloaded – just lifted from
the local system's cache, although it can slow down the loading of the first page,
as all the images have to be loaded first.
The Alternative Content
Finally, what happens if the browser doesn't know how to handle the
object specified by the type and data attributes? Here, we've used an unknown value
for type:
The result is that, after a few moments' indecision, the browser (IE and Netscape
6 only – Opera 5.x displays the image regardless) reports that it can't handle
the file and displays the alternative text content of the <object> element:
Unfortunately, Internet Explorer's quirky rendering of images with a permanent vertical
scrollbar means that adoption of the <object> element in preference to the
<img> element is not likely to happen yet.
Inserting Components into a Web Page
While it isn't possible to look at an example of how to embed every
single object or component into web pages, we're going to look at a cross section
of components that we can embed into web pages using the <object> element.
Showing a Movie
There are several components that are included with each different version
of Internet Explorer, which give us the ability to make our web pages come alive
by providing special formatting features, animation, video, and much more.
Perhaps the most useful of them is Microsoft's Windows Media Player control, which
comes as part of the DirectX SDK and is available in IE 4 and upwards. Windows Media
Player allows us to play back popular media formats on the web, including progressive
playback of MPEG Audio and Video, AVI files, some types of QuickTime MOVies, MP3,
WAV Files, and MIDI. As this component comes with IE, we don't need the codebase
attribute to locate a version of Windows Media Player.
Here we are going to show how to put in-line video into a web page, by inserting
Windows Media Player as an object, like so:
Take a look at the following code:
The versatility of the Windows Media Player Control is that we can just as easily
change the code to play an MP3 sound file, by changing the FileName parameter value
as follows:
This will embedded an MP3 file within the web page.
As can be seen, there are a number of <param> tags included within the <object>
element itself: these are all parameters for the Windows Media Player control. If
we wanted to embed a different object in our page, the properties for that object
would be different, and we would need to enter those different parameters. We are
not actually going to spend any time explaining these properties, but further information
on Windows Media Player can be found at:
http://msdn.microsoft.com/workshop/imedia/directx/docs/wmp/content_authoring_guide.asp.
|
