On 15 mai, 08:20, David Stone <no.em...@domain.invalidwrote:
<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/BugzillaSecti...rSameIdAndName
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 (ó)
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 <aelement have been removed from HTML 5
http://www.w3.org/html/wg/html5/diff/#absent-attributes http://www.whatwg.org/specs/web-apps...nt-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 <mapis more
recommendable.
3- The contents of <mapshould 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
<objecteither:
http://haignet.co.uk/object-image-map.htm
and in a few other testcases
4- Some validators will report this
<link rel="stylesheet" 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/Nv...tml#validators
HTML Tidy and HTML validator (working offline)
http://users.skynet.be/mgueury/mozilla/
Regards,
Gérard