The object element

The <object> element defines an embedded object. The <object> element is used to embed multimedia objects into web pages that are generally not natively supported by the browser. Object can be used for video clips, sound, images and other media formats. “Other media formats” include formats that are generally natively supported by browsers, such as images, text and html. The <object> element (and the various attributes) and child parameters provide browsers and multimedia application embedded in browsers with the information required to display multimedia objects.

<object data="myImage.png" type="image/png"></object>
<object data="myIframe.html" type="text/html"></object>
<object data="myMusicFile.mpeg" type="application/mpeg"></object>

Listing 1: the <object> element is a generic way of including media. Use more type specific elements, such as <img> or <iframe> when available. The <img> element is discussed in part 9 of this series.

The <object> element is generally used for embedding multimedia that requires the browser to load an external application to render the media (such as a flash movie or an audio file). The <object> element, along with its attributes and child <param> elements, allows you to specify everything required by the object — applets, plug-ins, media handlers and other components you may want to include in your web page — for presentation of that media by the browser and browser plugin, including source code, data type, initial values, etc. When including a Java applet, a .swf file, an ActiveX object, or other multimedia object, specify the data and parameters for objects and the code that can be used to display and manipulate the object data via <object> element attributes and child <param> elements.

Specifications and Browser Support

While the object element was supposed to be an important addition to the HTML 4.0 standard, it is still not completely supported by all browsers; though all browsers do support it to some extent. Whether an object is supported by the browser depends on the object type. The object element can be used to show many different media types such as ActiveX, PDF, Flash, or HTML, images and text files). Unfortunately, some browsers use different code to load the same object type. The nesting of the object elements is a great solution to enable you to degrade media based on browser support.

The <object> element can be located in either the <head> or as a child of the <body> element. The <object> can be found inside both block and inline elements, including inside the <button> and <a> elements, but NOT as a child of the <pre> element. The <object> element, in turn, can contain both inline and block level elements, including <param>, <form>, text and child object elements. While we’ll discuss <param> below, note that if a <param> element is found between the <object> and </object> it is part of the object of which it is a direct child and not an alternate code to execute. If text is found between the opening and closing <object> tags, it is alternate text for browsers that do not support the <object> element or the media defined by the <object> element. If the browser is able to display any of the parent media, then the text will not be displayed.

While the object element is an INLINE element, it can contain both inline and block level elements. Because it is an inline element, some recommend only including inline elements as children. If you are providing alternative content that will be displayed, my view is that you should use whatever HTML elements are most appropriate for displaying the default content, since it is valid to do so.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   width="368" height="190" title="This is my flash movie">
   <param name="movie" value="myFlash.swf" />
   <param name="quality" value="high" />
   <object data="myImageName.jpg" type="image/jpeg">
     Some text 

Listing 2: Example of code for an <object> element embedding a .swf file. I’ve added a nested image object for browsers not supporting flash (think iPhone!), and some default text if images are not displayed or found.

The <object> element

<object> elements can be nested inside a parent <object> element to provide the browser with alternative content to present if the browser is unable to display the media included by the outermost parent <object>. The browser walks thru the nested <object> media until it finds a media type it can render. If a browser is unable to render the media type of the parent object, the browser will try to render the next child <object> element until it finds an <object> with a datatype it is able to render. The search for the first renderable child will continue thru all the included object, and, if no renderable <objects> are found, the browser will display any HTML content, including images, that is the child of the inner-most <object> element.

For example, if you are displaying a Flash movie, but the user’s browser does not have the flash player installed, then you can present the user an image. However, if the user is using a tele-type reader, then you can serve the user text instead.

If the <object> element does not display properly, the content nested between the <object> and </object> tags will be executed. This allows allows you to have several nested object elements (one for each browser, depending on browser media support), and default text for some browsers if the content is not found or if the media is not supported.

Note: When the browser supports the media type, but the file is not found, browsers differ on whether or not to show the nested content.

Examples of simple <object> elements in action

<object data="real_file.htm" type="text/html" width="300" height="200">
  <p>The link to <a href="missingfile.htm">a real page</a> will 
  not show in browsers,since browsers can render html</p>

EXAMPLE 1: Since the HTML data file DOES exist, the HTML file linked to with the data attribute will display. Browsers include the html file object in an iframe like display — in this case a 200 x 300px iframe since height and width were declared.

<object data="fake_file.htm" type="text/html" width="300" height="200">
  <p>The link to <a href="missingfile.htm">a missing page</a> will 
  show in some browsers, and not in others </p>

EXAMPLE 2: Since the HTML data file does NOT exist, the above will display differently in different browsers. For example, IE6 provides an empty iFrame like 200px by 300px space, Safari displays the paragraph, and Firefox displays nothing.

<object data="real_pdf.pdf" type="application/pdf" width="300" height="200">
  <p>The link to <a href="real_pdf.pdf>a real pdf file</a> will 
  show in some browsers. Others will display the Adobe Acrobat application 
  within and iframe</p>

EXAMPLE 3: Since the pdf file DOES exist, the HTML file linked to with the data attribute will display IF the browser supports displaying PDF files within a browser window. However, if the user’s browser does not support in-browser displays of Adobe Acrobat, the paragraph with the link to the pdf file will be displayed.

<object data="myMusicFile.mpeg" type="application/mpeg">
     <object data="missingImage.jpg" type="image/jpeg">
        My Text Replacement 

Listing 4: If you have Quicktime, or some other audio format plugin supported by your browser, the music file will be displayed. If there is no media player, the browser will display the JPG instead of MPEG. However, in our example, the image doesn’t exist. Firefox and Safari correctly display the replacement text. However, IE6 tries to display the missing image.

Note that in example four, the image is included as an <object> instead of <img> because I wanted to display the text ONLY if the image did not load: I didn’t want to display both. Browsers will consider the <img> element as part of the data to be displayed if the user agent can not render the data in the outer object element. Since the <object> element does not support the alt attribute, a better way of coding the contents of listing 2 would be:

<object data="myMusicFile.mpeg" type="application/mpeg">
     <img src="myImageName.jpg" alt="My Text Replacement" /> 


This is more appropriate since you can include an alt attribute with the image. If a user agent does not render images, the text provided in the alt attribute will be displayed, which was what was intended in Listing 2.

Attributes of the <object> element

In addition to the core attributes and internationalization attributes, the <object> element accepts the following attributes:

  • declare

    The declare attribute, when included, states that the object should only be declared, not created or instantiated until needed. The declare attribute only takes one value: declare="declare".

  • classid

    The classid attribute defines a class ID value as set in the Windows Registry or a URL. Used to specify the location of the object’s implementation, the URL syntax depends upon the object’s type. The value can be either a traditional address or an apparently incomprehensible string of letters and digits that are actually the letters C-L-S-I-D, followed by a colon, space and the object ID, such as “CLSID: 99B42120-6EC7-11CF-A6C7-00AA00A47DD2”, for an ActiveX control. Classid is used in conjunction with or as an alternative to the data attribute. Unless you can figure out the Registry of classid’s, get the correct classid value from the supplier of the ActiveX control. For example, for .swf files, the classid value is generated by Flash when the developer publishes the .swf and associated .html file from the .fla file. Or, when using Dreamweaver to inset media, Dreamweaver automatically includes the correct classid value..

  • codebase

    This codebase attribute contains the URL to use as a relative base for the URL specified by the classid attribute. In Listing 2 above, the URL of the codebase points to the codebase for the flash player or plug in. Note that the URL for the SWF file is included in the child parameter and NOT in the <object> element.

  • data

    Another URL, the data attribute contains the location of the data required by an object. This should be either a relative or absolute path the your file.

  • type

    This type attribute specifies the content-type, or MIME type, for the object’s data. This is different from the codetype (below), which is the MIME type of the object and not of the data it uses.

  • codetype

    This attribute specifies an object’s content-type, or MIME type. This defines the MIME type of the object, not the the data the object may use, as defined in the data attribute.

  • archive

    This archive attribute contains an absolute or relative URL, or space separated list of URLs, for the location of archive files. An archive file is generally used to contain multiple object files to improve the ability to access the object improving perceived download time.

  • standby

    If you want to define the text displayed while the object is loading include the standby attribute with the text message to be displayed as the attribute value.

  • height

    This height attribute specifies the height of the object in pixels or as a percentage of the enclosing window, depending on whether the percentage symbol is included. This value is overridden if the CSS defines a height for the object.

  • width

    This width attribute specifies the width of the object in pixels or as a percentage of the enclosing window, depending on whether the percentage sign is included in the attribute value. The CSS width property overrides the element attribute value when included.

  • usemap

    Objects can have hyperlinks associated with them through standard links using the <a> element, thru embedded linking mechanisms such as links in a flash movie, and also via image maps. The usemap attribute generally takes a fragment identifier referencing a map element somewhere else within the file of the image map to be used with the object as the value, but can also take an URL to a map in a separate file in browsers that support such behavior. If you include the usemap attribute, you should also include a <map> and the object will most likely be an image. An image map specifies active geometric regions of an included object and assigns a link to each region. Image maps are covered in part 10 of this series.

  • name

    The name attribute is allowed, but is not required.

  • tabindex

    Along with <a>,<area>,<button><input>, <select> and <textarea>, the <object> element also supports the tabindex attribute.

The border, align, datafld, dataformats, datasrc, hspace and vspace attributes for the <object> element have all been deprecated in XHTML.

The <param> element

The <param> element is used to define special parameters used to control Shockwave and Flash SWF files, ActiveX controls, Netscape Navigator plug-ins, and Java applets. The <param> element can only be nested within a parent <object> or <applet> element. (Note that the <applet> element is not valid in XHTML strict). Parameters set attributes specific to different types of objects. For example, a Flash object can use a quality parameter <param name=”quality” value=”best”> for the object tag. If you are using Dreamweaver, you will find a Parameter dialog box in the Property inspector.

The <param> element is an empty element, so must be closed with a trailing slash. The name attribute is REQUIRED. The value attribute, while optional, should be included. The <param> element also accepts the id, valuetype, and type attributes.

Note: There is no widely accepted standard for identifying data files for ActiveX controls. See the documentation for the object you’re using for information on the parameters it requires.

Converting Flash to images

As web developers, we sometimes receive FLA, or Flash files, to include in our websites. Unfortunately, those Flash developers sometimes forget to include the original files used in creating the Flash Movie: files that would be really helpful in creating images used throughout the rest of the web site.

If you have the original FLA file, it is possible to export library items to create .png, .jpg and other useful files. While most tutorials here teach how to include images in your Flash file, in this tutorial we do the reverse: In this tutorial I’ll show you a simple method of exporting buttons, movie clips and graphics.

Steps to Exporting Images from Flash Files

Step 1: Open the FLA file that your Flash developer sent you.

Step 2: Open the Library of elements used in the FLA file. To open the Library press CTRL-L on Windows, or Apple+L on the Mac. Your library should look something similar to the Listing 1:

Flash Library

Listing 1: What a Flash library looks like when opened.

Step 3: Open a new Flash file by pressing CTRL-N, Apple-N or File > New then selecting Flash File from the options provided.

Step 4: You’ll note that when you open a new Flash file, the Library panel switches from the formerly active Flash file’s library to the Library for your new file, which is empty and untitled. However, you have access to the libraries of all the open Flash files. In the Library panel’s library name drop down menu, select the Flash file library that contains the library symbol you want to export.

Select the correct library from the drop down menu

Listing 2: Select the Flash file name of the Flash file opened in step from the "Library Name" drop down menu.

Step 5: Drag and drop the library symbol you would like to export by dragging and dropping the symbol from the library into your newly opened, currently untitled new Flash file.

Step 6: Export your movie into your selected file type. To export, select File > Export > Export Image.

Export your file

Listing 3: When you export a flash file as an image, you get the Export Image dialog window above.

Step 7: Enter a file name and select the location where you want the file saved. Also select the format for your exported file from the drop down menu in Listing 3.

Export Image Dialog Boxes

Listing 4: Sample dialog boxes that differ based on export file type selected.

Step 8: Depending on the file type you select, you will get a dialog box with options based on the file type. Select the options you want and select "OK"

What next?

That’s all there is to it! You now have a gif, jpeg, png, or even Illustrator, PCT, EPS, and, depending on your Flash version, possibly other file types.

This little trick has been useful to me when I don’t have the original files used in developing the Flash file, and for my own FLA files, when I don’t remember the file names of my compenents: this method is often quicker than searching my harddrive.

JavaScript Variable Scope

There are two variable scopes in JavaScript: local and global. Local variables exist only inside the function in which they were declared. Local scope means a variable can only be referenced from within that function in which it was declared. Global variables, on the other hand, once declared, exist throughout the script and their values can be accessed (and changed) from within any function or outside of a function. In other words, global scope means a variable can be referenced from anywhere within your site’s javascript.

There is a third type of scope called "static" or "closure". "Closures" are variables that are local to a function, but keep their values between function calls. Closures are an advanced javascript topic and will not be discussed in this article.

Let’s show 5 variables being declared, and discuss their scope

1.  <script type="text/javascript">
3.  var outsideFunction1 = "hello"; 
4.  outsideFunction2 = 42; 
6.  function myFunction(myParameter){
7.      var insideFunction1 = new Array();
8.      insideFunction2 = false;
9.  }
11. </script>

Listing 1: Example of local and global variable declaration

The first variable is on line 3: outsideFunction1. Even though this variable is declared with the var keyword, it is declared outside of any function, and therefore has global scope.

The second variable is on line 4: outsideFunction2. This variable is also declared outside of any function, and therefore has global scope.

The third variable is on line 6: myParameter. Function parameters always have local scope. Even if there were a global variable called myParameter, that global variable will maintain its value even if the value of myParameter was changed within the function.

The fourth variable is on line 7: insideFunction1. Because this variable is declared within a function with the var keyword, it also only has local scope. Similar to parameter variables, even if there were a global variable called insideFunction1, that global variable would maintain its value even if the value of insideFunction1 were changed within the function.

The fifth variable is on line 8: insideFunction2. This is really the reason that this article is needed: this is a global variable declared within a function, which is one of the most common causes of logic errors. Because the var keyword has been omitted, the insideFunction2 variable is global.

Local Variables

Variables initialized inside a function using the var keyword will have a local scope. If you initialize a variable inside a function without the var keyword, your variable will have a global scope. Parameters are local variables, as if the keyword var was included before the parameter. Local variables, including a parameters, can have the same name as a global variable.

var myName = "estelle";  // global
function alertThisName(myName){ // local
		alert(myName); // alerts "jonathan"
alert(myName); // alerts "estelle";

Listing 2: The variable myName is declared both globally outside of the function, and locally as the function parameter. Variables declared as function parameters have local scope. The myName variable on the first line is a global variable. The variable myName declared as a parameter of the function is a local variable only visible within the alertThisName function.

In this case, declaring a local variable with the same name as a global variable masks the global variable: all global variables in your script are accessible to this function EXCEPT the global myName variable.*

Note: In browsers, global variables that are masked by a function’s local variable with the same variable name are still accessible to the function by accessing the global variable thru it’s parent. In Listing 2, if you are in a browser, you could access the global myName variable from within the alertThisName function by using window.myName or top.myName.

var myCount = 7;  // global
function doSomeMath(){ // 
		var myCount = 7 * 7;
		alert(myCount); // alerts "49"
alert(myCount); // alerts "7";

Listing 3: In this example, the global and local variables both have the same name. Since the variable within the function was declared using the var keyword, the variable has local scope. Manipulating the value of the local value has no impact on the value of the global variable declared in the first line.
Once we exit the function, the local variable myCount no longer exists and recognition of the global variable’s existence is reinstated.

Similar to listing 2, in this case the local declaration of the myCount variable makes the global myCount variable inaccessible to this function. The function can access all global variables EXCEPT for the global myCount variable, unless you access the variable as noted in the tip above.

var myCount = 7;  // global
function doSomeMath(){ 
		myCount = 7 * 7;
		alert(myCount); // alerts "49"
alert(myCount); // alerts "49";

Listing 4: Since the variable within the function was declared WITHOUT using the var keyword, the variable has GLOBAL scope. The global variable declared in the first line and the variable used in the function both have the same name and are, indeed, the same global variable. In this example, manipulating the value of the global value within the function changed the value of the variable throughout the program.

function doSomeMath(){  
		myCount = 7 * 7;
		alert(myCount); // alerts "49"
alert(myCount); // throws an error: myCount is undefined

Listing 5: While the variable in the doSomeMath function would be a global variable, as the variable is declared in the function WITHOUT using the var keyword. Since the function is never called, the variable is never declared. Accessing the variable that doesn’t exist in the last line throws an error.

Rules to remember:

  1. Local variables inside a function can only be referenced from within the function in which the local variable was declared.
  2. All global variables can be referenced from within any function.
  3. All global variables can be referenced from outside any function.
  4. No local variables, declared with use of the var keyword, can be referenced from outside the function in which they were declared

CSS Reset

Resetting browser default CSS

Whenever I start a new site and begin a new CSS file or CSS file set for the site, my first step is to include CSS to reset the browser CSS defaults.

Different browsers have slightly different default rendering. The default values for margin, padding and line-height differ between browsers. Removing the inconsistent default styling for elements in various browsers creates an equal starting point and allows you to explicitly set your own default settings that are equal in (almost) all browsers. By starting with an equal playing (or presentation) field, your CSS will not only look similar in all browsers, but your CSS file size will be smaller, and the number of aspirin you need to take to complete your site will be reduced.


Here is the code I generally use. I’ll explain it below:


body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, 
pre, form, fieldset, legend, input, textarea, label,
blockquote, table, th, td {
		margin: 0;
		padding: 0;
		background-repeat: no-repeat; 
		font-family: Verdana, Arial, Helvetica, sans-serif; 
		font-size: 100%; 
		line-height: 1.4; 
		color: #333333; 
a, span {
		background-repeat: no-repeat; 
		outline: none;	

table {
		border-collapse: collapse;
		border-spacing: 0;

fieldset, img, abbr, acronym {
		border: none;
		text-decoration: none; 

ol, ul {
		list-style: none;
caption, th {
		text-align: left;
		font-weight: normal;

q:before, q:after {
		content: '';

input, textarea, select {
		font-family: inherit;

 /* declare your site defaults here */

In your conditionally commented CSS file for IE7 and less include the following:

input, textarea, select {

CSS explained

While you may not use all the elements listed, and you may want your defaults to be slightly different, the above CSS is a good starting point. You might as well include all these elements, because you never know if someone else coding the site, or a future developer, may use those elements.

The first call sets the margin and padding of all elements to none. You won’t have to declare margin and padding of 0 again in your CSS. I have seen style sheets with ‘margin: 0’ included over 100 times. By including this default CSS, you only have to declare margins when you are overwriting the new zero default. Also, you don’t have to remember to explicitly set the body padding and margins.

Different browsers also display h1-h6 differently. This CSS nullifies the browser default settings and makes them look like the rest of your code. This way you decide how you want to display your headings. Also, by declaring a font-size in percentages, we resolve the IE ems rendering issues.

There are some settings in the code above that are redundant or irrelevant and will have no impact, such as setting margins on inline elements. CSS does not penalize you for including properties that are not used. I include all the elements in the first line, even though some of the properties are not used on some of the elements.

The default value for background images is to have them repeat on both the X and Y axis. Generally, you don’t want background images to repeat. The CSS above sets the background-repeat to no-repeat.

Just remember to AVOID use the background shortcut. If you omit one of the elements of the shorthand (background-color,
background-position) you may inadvertently reset one of the properties to the default.

The call includes several optional/changeable items. Feel free to reset the font-family, color and line-height to your own preferences.

With font-family, include default fonts in the initial CSS browser reset. By declaring the fonts in this way, you will save a lot of characters by not having to declare default fonts elsewhere in your CSS. For example, if you declare your <h1> on your contacts page to have a unique font, you simply have to write something similar to:

#contact h1 { font-family: Hacknslash;} 

If the user doesn’t have the "Hacknslash" font, then it will default to Verdana, Arial, Helvetica, sans-serif, since you declared that in your brower reset CSS.

I chose the grey of #333333 instead of #000000, because black on white can be hard on the eyes. This dark grey is less harsh. You can use whatever color your design requires.

Line height is also up to you. You’ll note that there is no measurement type such as em, px, pt or % included. You can use these measurements. Omitting the measurement sets a number that will be multiplied with the current font-size to set the distance between the lines, similar to declaring em or %.

Since links, spans, code and other in-line elements have no default margin and padding and inherit, I declare them seperately to not overburden the browser rendering engine. I’ve declared two elements in this case as I use a lot of background images in my links and spans and want to ensure that those background images don’t repeat. The outline: none; on the links removes the box you may see around links when the mouse is down.

Note that you should not use the global selector, *, because the browser may overwrite default styling that you want to keep, such as padding on buttons. Also, when the global selector is used, the browser than has to apply the style to every element, which is a heavy load for the browser.

Defaults bullets are removed from ordered and unordered lists. Bullets are placed in different locations in different browsers: Firefox vertically aligns the bullet to text bottom and Internet Explorer vertically aligns the bullet to text top. I like to not only control my bullets, but generally my <li>s are inline, have background images instead of bullets, or are otherwise styled.

The caption and table header declarations are included since browsers tend to center them, and tend to bold table headers. The quote declaration is included since Firefox, Opera and other compliant browsers add quotes to <q>, while Internet Explorer, up to IE7, doesn’t even understand the :before and :after pseudo-classes. (This is resolved in IE8).

Most of the rest of the CSS is self explanatory except perhaps the IE conditional comments portion. Browsers are notorious for rendering forms differently: the input, textarea, select font-size declaration tells IE7 and earlier to not enlarge fonts that are in form elements.

Remember to include your form elements in block level elements. For example, put <textarea> in a <p> element so that it inherits font-family correctly in Opera.

The last line, "declare your site defaults here", is a good spot to declare the other default fonts and colors for your site. If all your h1s are going to be a different color and font, then start with your general, non-classed declarations. Remember to include this Browser Reset CSS at the top of your CSS. In this way, you can use the cascade to declare your defaults without requiring classes. Otherwise, you would have to include additional specificity for things that really should be generally declared.

Other browser reset arguments

There is an argument to remove ALL the defaults, such as bolding of the <strong> element, italicizing of the <em> element, monospacing of the <code> element, etc. The argument is that you should start from scratch, and build up all your own CSS. Below are some additional statements you can consider including in your CSS browser reset:

address, caption, cite, code, dfn, em, strong, th, var { 
	h1, h2, h3, h4, h5, h6 { 

sup {
		vertical-align: text-top;

sub {
		vertical-align: text-bottom;