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.
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.
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).
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.
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.
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).
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.
| 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.