ÿþ<html> <head> <title>Object embedding test</title> </head> <body> <h1>Object embedding test</h1> <p>Purpose of this test: to find out what is needed for present-day browsers to display sources using the html-4 <a href="http://www.w3.org/TR/html401/struct/objects.html#edef-OBJECT" title="Specification">object</a> element.</p> <p>A nice article about using the object element to both create standards-compliant web pages and have media playing as well, can be found at <a href="http://alistapart.com/articles/byebyeembed" title="Visit their web site">A List Apart</a>.</p> <dl> <dt>1. Just an image object of type jpg.</dt><dd> <object type="image/jpg" standby="Loading jpg image..." data="im1/trt.jpg" height="100" width="200" > <em>Sorry, your browser isn't equipped to show jpg-image objects.</em> </object></dd> <dt>2. Just an image object of type png.</dt><dd> <object type="image/png" standby="Loading png image..." data="im1/diagram.png" height="200" width="100" > <em>Sorry, your browser isn't equipped to show png-image objects.</em> </object></dd> <dt>3. Just an audio object of type mp3.</dt><dd> <object type="audio/mp3" standby="Loading mp3 audio..." data="../muziek/makethiswork.mp3" autostart="false" height="30" width="200" > <em>Sorry, your browser isn't equipped to play mp3-audio objects.</em> </object></dd> </dl> <p>Now we extend above examples with fall-back elements in case the browser isn't equipped to display the object elements. (This can happen due to multiple reasons. For example, a plug-in might not be installed or disabled, or the browser doesn't support the object element at all.)</p> <dl> <dt>4. An image object of type jpg with a fall-back img element.</dt><dd> <object type="image/jpg" standby="Loading jpg image..." data="im1/trt.jpg" height="100" width="200" > <em>Sorry, your browser isn't equipped to show jpg-image objects. Here's a fall-back image: <br><img src="im1/trt.jpg" alt="Fall-back jpg image" height="100" width="200" title="Fall-back jpg image"></em> </object></dd> <dt>5. An image object of type png with a fall-back img element.</dt><dd> <object type="image/png" standby="Loading png image..." data="im1/diagram.png" height="200" width="100" > <em>Sorry, your browser isn't equipped to show png-image objects. Here's a fall-back image: <br><img src="im1/diagram.png" alt="Fall-back png image" height="200" width="100" title="Fall-back png image"></em> </object></dd> <dt>6. An audio object of type mp3 with a fall-back embed element.</dt><dd> <object type="audio/mp3" standby="Loading mp3 audio..." data="../muziek/makethiswork.mp3" autostart="false" height="30" width="200" > <em>Sorry, your browser isn't equipped to play mp3-audio objects. Here's a non-standard fall-back embed:</em><br><embed type="audio/mp3" src="../muziek/makethiswork.mp3" autostart="false" height="30" width="200" > <noembed><em>Sorry, your browser isn't equipped to play embedded objects either.</em></noembed></embed> </object></dd> </dl> <p>Instead of the ugly fall-back we can also try adding an extra parameter to the object elements. First method: to add the src attribute to the object element.</p> <dl> <dt>7. An image object of type jpg with an added src attribute.</dt><dd> <object type="image/jpg" standby="Loading jpg image..." data="im1/trt.jpg" src="im1/trt.jpg" height="100" width="200" > <em>Sorry, your browser isn't equipped to show jpg-image objects.</em> </object></dd> <dt>8. An image object of type png with an added src attribute.</dt><dd> <object type="image/png" standby="Loading png image..." data="im1/diagram.png" src="im1/diagram.png" height="200" width="100" > <em>Sorry, your browser isn't equipped to show png-image objects.</em> </object></dd> <dt>9. An audio object of type mp3 with an added src attribute.</dt><dd> <object type="audio/mp3" standby="Loading mp3 audio..." data="../muziek/makethiswork.mp3" src="../muziek/makethiswork.mp3" autostart="false" height="30" width="200" > <em>Sorry, your browser isn't equipped to play mp3-audio objects.</em> </object></dd> </dl> <p>Second method: to add a src parameter to the object element.</p> <dl> <dt>10. An image object of type jpg with an added src parameter.</dt><dd> <object type="image/jpg" standby="Loading jpg image..." data="im1/trt.jpg" height="100" width="200" > <param name="src" value="im1/trt.jpg"> <em>Sorry, your browser isn't equipped to show jpg-image objects.</em> </object></dd> <dt>11. An image object of type png with an added src parameter.</dt><dd> <object type="image/png" standby="Loading png image..." data="im1/diagram.png" height="200" width="100" > <param name="src" value="im1/diagram.png"> <em>Sorry, your browser isn't equipped to show png-image objects.</em> </object></dd> <dt>12. An audio object of type mp3 with an added src parameter.</dt><dd> <object type="audio/mp3" standby="Loading mp3 audio..." data="../muziek/makethiswork.mp3" autostart="false" height="30" width="200" > <param name="src" value="../muziek/makethiswork.mp3"> <em>Sorry, your browser isn't equipped to play mp3-audio objects.</em> </object></dd> </dl> <p>And if everything else fails, we can try adding an iframe... but adding a link to the source is friendlier.</p> <dl> <dt>13. An image object of type jpg with a fall-back hyperlink.</dt><dd> <object type="image/jpg" standby="Loading jpg image..." data="im1/trt.jpg" height="100" width="200" > <em>Sorry, your browser isn't equipped to show jpg-image objects. Here's a hyperlink showing the same:</em><br> <a href="im1/trt.jpg">The jpg image</a> </object></dd> <dt>14. An image object of type png with a fall-back hyperlink.</dt><dd> <object type="image/png" standby="Loading png image..." data="im1/diagram.png" height="200" width="100" > <em>Sorry, your browser isn't equipped to show png-image objects. Here's a hyperlink showing the same:</em><br> <a href="im1/diagram.png">The png image</a> </object></dd> <dt>15. An audio object of type mp3 with a fall-back hyperlink.</dt><dd> <object type="audio/mp3" standby="Loading mp3 audio..." data="../muziek/makethiswork.mp3" autostart="false" height="30" width="200" > <em>Sorry, your browser isn't equipped to play mp3-audio objects. Here's a hyperlink showing the same:</em><br> <a href="../muziek/makethiswork.mp3">The mp3 audio</a> </object></dd> </dl> <address>A.E.Veltstra<br> 2007-03-12</address> <p><a href="./" title="Up to the Programming chapter">Index</a></p> </body> </html>