Question

I’m developing a web app at the moment, and, being a perfectionist, I try to make it all shiny and compliant with all the standards. As far as I know, the <img> tag is to be deprecated in the upcoming standards for xHTML, and as nowadays even IE is able to handle <object> properly, I wanted to use the <object> tag for all the images on my site.

Now, I need to preload some of my images for standard onmouseover swapping. It was no problem with <img>:

var rateImagesURLs = new Array("images/mark0.png", "images/mark1.png");
var rateImages = new Array(rateImagesURLs.length);

for (var i=0;i<rateImagesURLs.length;++i) {
    rateImages[i] = new Image();
    rateImages[i].src = rateImagesURLs[i];
}

but I can’t get it to work with <object>. I just can’t find a way to connect JavaScript’s Image object to actual <object> tag. I tried playing with <object>‘s data, as well as archive attribute, but even the guys at W3C seem to be unsure as to how to use it, suggesting in their documents separating values with spaces in one place, and then commas a few paragraphs below… So my question is: how do I preload images in JavaScript using <object> tag?

P.S. Sorry for lengthy intro for rather simple question.

Answer 1

This is, quite frankly, silly. <img> isn’t going anywhere, and it certainly isn’t “falling from grace.” In fact, the spec you reference (XHTML2) has been abandoned.

The XHTML2 Working Group’s charter expired before it could complete work on this document.

What you should be targeting standards-wise is HTML5. Even though I recommend against it, if you absolutely insist on XHTML, XHTML5 is a subset of HTML5; however, the only difference is really the MIME type you use to serve your page. Because the required MIME type (application/xhtml+xml or application/xml) is less compatible with legacy browsers, there’s really no reason to use it in a standard website/web app.

---

Regarding the whole <img>/<object> thing:

From a practical standpoint, use <img>. You’re only introducing a whole host of compatibility problems with existing browsers by trying to use <object>.

<object> is not accessible. <img> has an alt attribute for accessibility, and screen readers know how to handle it. Screen readers may not know what to do with an <object>. Additionally, <object> isn’t semantic, it’s totally generic. <img> means it’s an image.

And again, <img> isn’t going away or falling out of favor any time soon. For the foreseeable future, it will remain the recommended way to embed an image in your HTML document.

---

Finally, a comment on how you’re going about accomplishing an image rollover: you shouldn’t do this in JavaScript; use CSS.

Ideally, you’d use a sprite (requiring one HTTP request for all your images, thereby greatly improving performance), and adjust the background-position in :hover.