Re: Safari, image maps, and links

On 15 mai, 08:20, David Stone <no.em...@xxxxxxxxxxxxxx> wrote:

<http://www.chem.utoronto.ca/coursenotes/analsci/atomic/faas.html>

[snip]

1-
line 38: <p class="leftside" id="aamap">
and
line 63: <map name="aamap">

Gah! Totally missed that. I'm guessing that the W3C validator
didn't throw a warning because technically one is an id and one
a name?

Actually, it's valid.... but it may not be working as such in
browsers. I remember having to test <a id="..." href="..."> and <a
name="..." href="..."> in browsers
http://www.gtalbot.org/BugzillaSection/Bug253091.html#AnchorSameIdAndName
and there were differences. id is more restrictive: it must be
document unique, must use 32-127 character code ascii. name is more
permissive: can be reused, can use more characters (&#243;)

By distinguishing both linkable elements, you remove possible code
confusion and possible browser pitfall (incorrect or imperfect browser
implementations).

HTML Tidy will report (and was reporting) a warning saying that it
would not be able to convert the name attribute into an id attribute
since the id attribute value "aamap" was already taken. That's how I
spotted that issue.
Ideal and safest solution is to code name attribute value with as much
restriction, constraints as you would if it were an id attribute.

2- I have tested this and map, area, coords, shape all work fine in
Safari 3.1.1. Tab-focusing areas is a filed bug for Safari. But that's
a different issue.

I know that area works fine; my point was that it should, according
to the html 4 specification, ALSO work fine using a instead of area.

Here's what I propose so that you can "win" in all areas (no pun
intended).

Replace your current code with this more browser-safe/reliable
alternative (untested in Safari 3.1.1 though but it should work as I
have a testcase for this)

<div class="centred"><img src="faas.gif" name="faasdiag"
usemap="#aamap" alt="Flame atomic absorption spectrometer with
graphite furnace accessory" height="250" width="334">
<map name="aamap">
<area href="#lamps" shape="rect" coords="250,120,300,180"
alt="Lamps">
<area href="#burner" shape="rect" coords="130,110,190,225"
alt="Burner/Spray Chamber">
<area href="./gfaas.html" shape="rect" coords="0,130,100,225"
alt="Graphite Furnace">
</map>

<p class="centred">Parts of the AA:
<a href="#lamps">Light Sources</a> |
<a href="#burner">Burner/Spray Chamber</a> |
<a href="./gfaas.html">Graphite Furnace</a></p>
</div>

(the <p class="centred"> node could be located outside the <div
class="centred">)

Note that your alt attribute has been improved from
alt="photo of a flame atomic absorption spectrometer with graphite
furnace accessory"
into
alt="Flame atomic absorption spectrometer with graphite furnace
accessory"

Words like "image", "photo", "picture" should not, never appear in alt
attribute value.

And then file a bug at bugs.webkit.org regarding your original code
with nested links.

[addendum]
One importantissimo issue here that I must notify you is that coords
and shape attribute for <a> element have been removed from HTML 5

http://www.w3.org/html/wg/html5/diff/#absent-attributes

http://www.whatwg.org/specs/web-apps/current-work/#the-a

So browser manufacturers are not at all tempted to fix bugs (or
complete their support) regarding attributes which will be deprecated
in the future. I have filed a bug once to a browser manufacturer and
was later replied something like "we won't fix this HTML 4 bug
(support, implementation) since HTML 5 changes how that related
element specification.
The efforts, energy, time, personel, cost, etc. involved for fixing
bugs, implementing new stuff, etc.. is, generally speaking, collossal
for browser manufacturers.
[/addendum]

You said earlier that

"
if Safari would actually honour the
shapes and coords in the image map, since then at least the
cursor would change when it was over a 'hotspot'
"
Adequate, proper cursor change when hovering a map of clickable,
reactive <area>s works in Safari 3.1.1 for windows.
If adequate, proper cursor change do not occur when hovering a map of
clickable, reactive <a href="...">s in Safari 3.1.1 for windows, then
you may file a bug and I'll vote for it.

Again, for all those reasons, using <area>s inside <map> is more
recommendable.

3- The contents of <map> should ideally be <areas href="..." alt="...."
coords="...">

The point of using a instead of area is to have explicit text links
in addition to the image map.

With the more browser-safe alternative I suggested, you have explicit
text links in addition to the image map.

As such, alt seems a little redundant.
Of course, if it flat-out doesn't work in a number of browsers (and,
unfortunately, IE seems to be in this category) then it looks like
I'll have to have both the area elements and the a links :(


File a bug at bugs.webkit.org on your original code. I'll vote for it.
You can contribute to fix this bug for everyone in the future.
Overall, Safari has a weak, poor support for image map nested in
<object> either:

http://haignet.co.uk/object-image-map.htm
and in a few other testcases


4- Some validators will report this
<link rel="style***" href="../analsci.css">
has no type. You may want to be explicit on this.

Which ones?

HTML Tidy and as a warning.

http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#validators

HTML Tidy and HTML validator (working offline)
http://users.skynet.be/mgueury/mozilla/

Regards,
Gérard
.