<object> HTML element image map browser test

This sample page is to test out how well web browser’s work if a web site tries to use an image map with an embedded <object> HTML element and the usemap attribute.

This example code is based on the sample provided by the W3C, under Client-side image map examples.


Example 1:

These examples are to test if the <object> HTML element can associate the image map to the referenced <object> when the image map code is enclosed within the <object> HTML element.

Example 1.1:

Above should be an image of three faces, all of which are clickable. This is done using an image map and <object> HTML element combined. The <object> HTML element will place the referenced image in to the web page, and take the link coordinates and link destinations from the image map code within it, that doubles as a standard navigation list for the fallback.

If the image can’t be loaded, then the fallback should be a list of 3 links, as seen in example 1.2 below.

This seems to fail in Internet Explorer, Safari 5.0.5, Google Chrome and Konqueror 4.1 & 4.3.3 (faces aren’t clickable).

This seems to pass in Opera, Nintendo Wii Internet Channel and Firefox 3.6.16 (faces are clickable).


Example 1.2:

Above is an example of the <object> fallback, which deliberately references a non-existent image, and should be a standard navigation list, with a square bullet point.

The code is the same as example 1.1, but points to a non-existent image file, so the <object> element should fallback to the HTML code within it.

This seems to fail in Firefox 3.6.16*, Google Chrome and Konqueror 4.1 & 4.3.3 (no list of links appear).

This seems to pass in Internet Explorer, Firefox 4, Safari 5.0.5, Google Chrome, Opera and Nintendo Wii Internet Channel (list of links appear as expected).

*While the list of links does appear, Firefox 3.6.16 seems to add an odd double line / empty element border above and below the list of links, which looks out of place. This border disappears if the border is set to 0 via CSS.


Example 2:

These examples are to test if the <object> element can associate the image map to the referenced <object> when the image map code is not enclosed within the <object> element.

Example 2.1:

Above should be an image of three faces, all of which are clickable. This is done using an <object> element, while the image map code is separate. The <object> element will place the referenced image in to the web page, and take the link coordinates and link destination from the image map code that is placed outside of it. The standard navigation list, which contains the image map code, should appear below.

This seems to fail in Internet Explorer, Safari 5.0.5, Google Chrome and Konqueror 4.1 & 4.3.3 (faces aren’t clickable).

This seems to pass in Opera, Nintendo Wii Internet Channel and Firefox 3.6.16 (faces are clickable).


Example 2.2:

Above is an example of the <object> fallback, which deliberately references a non-existent image, and hence should be blank.

The code is the same as example 2.1, but points to a non-existent image file, so the <object> element should fallback to the HTML code within it (which in this case, is nothing). The standard navigation list, which contains the image map code, should appear below as normal.

This seems to fail in Internet Explorer, Firefox 3.6.16* and Konqueror 4.3.3 (something appears).

This seems to pass in, Safari 5.0.5, Firefox 4, Google Chrome, Opera Nintendo Wii Internet Channel and Konqueror 4.1 (nothing appears).

*Firefox 3.6.16 includes a border for the non-existent object, though this isn’t present if the border is set to 0 via CSS.


Summary

Browser results table
Browser Eg 1.1 Eg 1.2 Eg 2.1 Eg 2.2 Total
Opera pass pass pass pass 4 / 4
Nintendo Wii pass pass pass pass 4 / 4
Firefox pass pass pass pass 4 / 4
Google Chrome (desktop) fail pass fail pass 2 / 4
Google Chrome (mobile) fail pass fail pass 2 / 4
Apple Safari fail pass fail pass 2 / 4
Internet Explorer fail pass fail fail 1 / 4
Konqueror fail fail fail fail 0 / 4

Well done Opera & Mozilla! Almost there Apple and Google, you’re neck and neck! Come on Microsoft, don’t get left behind again!


Many thanks to Gérard Talbot for supplying the details of how Konqueror 4.1 & 4.3.3 renders these tests.