The HTML Object Archive Attribute

Google+ Pinterest LinkedIn Tumblr +

There is no HTML tag today for sound or video. There is one for image (the IMG tag), there are plenty for text (Paragraph tag, SPAN tag, etc.), but there is none for sound or video. There is however the HTML OBJECT element  (OBJECT tag) which you can use for any media. Media means text, image, sound, animation and video.

You need basic knowledge in HTML and JavaScript to understand this article. Today, the principles of this article work with Opera 9 and may be other major browsers at their latest versions. I have not been able to test the code samples with the latest versions of the other major browsers.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at That is, contact me for the slightest problem you have about what you are reading.

The Object Archive Attribute Proper
The HTML Object element has an attribute called the archive attribute. The value of this attribute is a space-separated list of URLs. As soon as the web page is loaded, each of these URLs downloads its resource (code, image, video, etc.). The resources arrive at the browser and just stay there until they are needed (by the browser script). These resources are officially there to be used by the Object element.

Data and type attributes of the Object Element
The Object element has an attribute called the data attribute. If the value of this attribute is the URL of an image, then you will see the image as the object at the browser.

The Object element also has an attribute called the type attribute. The same image can be created by different technologies, and so they are referred to as different types. A type of image supported by most browsers, is “image/jpeg”.

Other Elements and the Object Archive Attribute
Even though the archive attribute was made to be used by the Object element, it can be used by other elements on the web page. In this article, we shall use the image for illustration.

The use of the Object element as indicated in the HTML Specification, is still to be well developed by browsers. In this article we use the image for illustration and we go for simple design. The knowledge in this article, works mainly with Opera 9. Let us hope that the other major browsers have or will incorporate these principles in their latest versions.

Advantages of The Archive Attribute
– The Object archive attribute acts like a web page store. After the archive attribute has downloaded its resources, if the physical connection to the server is cut, the script in the web page will still be able to display the downloaded resources (images).
– While a resource is at the browser, whenever the user wants it (by clicking a button, say) it will be immediately available from the archive attribute and the time taken and wasted for the resource to be downloaded from the server will be omitted.

An Experiment
You will carry out the following experiment to see if the archive attribute works with your browser:

Type the following code and save it as an HTML file in the root directory of your server. You may use a personal web sever as indicated by the URL in the code. Also save a jpeg image with the name, myImg.jpg in the same directory.

function show()
document.getElementById(‘I1’).src = document.getElementById(‘O1’).archive;
document.getElementById(‘I1’).style.display = “inline”;

Some text.

Some text

Show Image

There is an Object element in the code. This Object element has only the type and archive attribute. The value of the archive attitude is the URL of an image. This image is downloaded and it is not displayed by the Object element. The value of the type attribute indicates the type of image downloaded.

This Object element has not been configured to display itself so it is not displayed. In the HTML code, outside the Object, there is a button and an image tag. The image tag does not have the source attribute and the CSS value of its display property is “none”. So this image is not displayed initially but the position where it would be displayed is known by the code.

When the button is clicked, the JavaScript copies the value of the archive attribute to the source attribute of the image element. The script also changes the CSS display property of the image to “inline”. As a result the image of the image element (not the object element) is displayed. That is, the image of the image tag is displayed.

If you have saved the HTML and image file above in a directory in a server, then open the web page in a browser and do not click the button yet. Go back to the server and delete the image file, while the web page is being displayed at the browser. Now, at the browser, click the button. If the archive attribute actually stored the image, then the image will be displayed. Well, these rules outlined, work with Opera 9. Let us hope that other major browsers have or will implement these rules soon.

Active Client Pages
With Active Server Pages, a page is produced at the server and downloaded to the browser, when the user types an address at the address bar of the browser and clicks Go. With Active Client Pages, the page is produced at the browser of the client’s computer; but the resources stay permanently at the server just like with Active Server Pages.

For Active Client Pages the web page designer knows the different possible resources that the user will use next and downloads them in advance. The first page and initial resources are produced in the conventional way. After that almost everything is downloaded in advance. The archive attribute of the HTML Object element is a good tool for Active Client Pages (ACP).

List of URLs
The value of the archive attribute is a space-separated list of URLs (actually URIs). It is possible for the archive attribute to download many images and you would want to be displaying the images one-by-one or in small groups. In this case it is advisable, to separate the URLs from one another and put them in a JavaScript Array. This separation and putting into the array should be done, immediately the web page is loaded. This does not disturb the operation of the archive attribute. While the separation and inclusion into the array is taking place, the downloading by the archive attribute will be going on.

When the URLs are elements of an array, you can easily use them from the array.

Regular Expression Technique for Separating the URLs
To conveniently separate the URLs in the string value of the archive attribute, you need Regular Expression Techniques. Consider the following statement:

var subject = document.getElementById(ID).archive;

This statement copies the archive attribute string into the variable, subject. The following statement gets all the URLs into the array, arr.

var arr = subject.match(/\S+/g);

After the above statement the archive attribute string with its URLs remain as it was; Each element in the array has a URL copied from the archive attribute. The first URL of the archive attribute is the first element of the array; the second URL of the archive attribute is the second element of the array; the third URL is the third element of the array and so on. I will not explain the second statement above any further, if you want to know more about it, read my series titled, JavaScript String Regular Expressions, in this blog. To arrive at the series, type, JavaScript String Regular Expressions, in the Search box of this page and click Search. If you have the Google Search box on this page, use it.

Handling more than One Images
Since browsers have not implemented all the features of the HTML Object element, you have to use it with care. So, if you have more than one image, let all of them be of the same type and you give their type as the type attribute of the Object element.

The following code is similar to the previous program. However, this time, there are five images and use is made of the JavaScript Regular Expression technique, and the array. Try the code with your own five images.

function show()
var subject = document.getElementById(‘O1’).archive;
var arr = subject.match(/\S+/g);
document.getElementById(‘I1’).src = arr[0]
document.getElementById(‘I1’).style.display = “inline”;
document.getElementById(‘I2’).src = arr[1]
document.getElementById(‘I2’).style.display = “inline”;
document.getElementById(‘I3’).src = arr[2]
document.getElementById(‘I3’).style.display = “inline”;
document.getElementById(‘I4’).src = arr[3]
document.getElementById(‘I4’).style.display = “inline”;
document.getElementById(‘I5’).src = arr[4]
document.getElementById(‘I5’).style.display = “inline”;

Some text.

Some text

Show Image

Changing the value of the data Attribute
If the value of the data attribute of the Object is an image, the Object will display itself as the image. You can have code that will be replacing the value of the data attribute and hence the image of the Object element. The following code illustrates this. Try it with five images:

function show(ID)
var subject = document.getElementById(‘O1’).archive;
var arr = subject.match(/\S+/g);
if (ID == ‘I1’)
document.getElementById(‘O1’).data = arr[0];
if (ID == ‘I2’)
document.getElementById(‘O1’).data = arr[1];
if (ID == ‘I3’)
document.getElementById(‘O1’).data = arr[2];
if (ID == ‘I4’)
document.getElementById(‘O1’).data = arr[3];
if (ID == ‘I5’)
document.getElementById(‘O1’).data = arr[4];


Some text.
<object archive=”http://localhost/img1.jpg http://localhost/img2.jpg http://localhost/img3.jpg &lt;br /&gt;&lt;br /&gt;http://localhost/img4.jpg http://localhost/img5.jpg” id=”O1″ type=”image/jpeg”>

Some text

Show 1
Show 2
Show 3
Show 4
Show 5

That is it, I hope other major browsers have or will soon implement the use of the HTML Object archive attribute.




About Author

Leave A Reply