Sample Chapter: HTML 4.01 Programmers Reference - Hidden Image Elements
(Page 7 of 10 )
We can also specify other style properties, for example this code:
<object type="image/gif" data="wroxLogo.gif" style="visibility:hidden; height:105pt; width:105pt"> This is our Wrox Logo</object> 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:
<object type="haven't/aclue" data="wroxLogo.gif" style="width:100; height:100"> This is our Wrox Logo</object> 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:
<html>
<head>
<title>ActiveMovie Example</title>
</head>
<body>
<object id="WindowsMediaPlayer" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" style="position:absolute;top:55;left:90">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="-1">
<param name="Volume" value="-5000">
<param name="FileName" value="http://webdev.wrox.co.uk/books/0707/ chapter12/RockClmb.avi"> </object>
</body>
</html> 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:
<param name="FileName" value="http://www.beemen.com/NewBeemenPages/ TheBeemenGoodnightBirmingham.mp3"> 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: MSDN.
Next: Inserting a Java Applet with the Object Element >>
More HTML Articles
More By Mitchell Harper
