Safari, image maps, and links

[David Stone]

Run into something recently that has left me a little puzzled.

According to the examples in section 13.6.1 of html 4.01...

<http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1.1>

I should be able to use <aelements with a specified
shape and coords within a <mapso that I can use the
links with an actual image and, at the same time, have the
links appear as text. Something like the map associated with
the large image at the top of this page:

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

This validates perfectly well, and functions as expected in
Firefox 2 (Mac). In Safari 3 (Mac), however, only the text
versions of the links work; none of the three rectangular
areas defined in the <atags are active.

Huh? Am I missing something here?

Further, Dreamweaver's (CS3 version) built-in validator objects
to the shape and coords attributes with the following message:

"The tag: "a" doesn't have an attribute "shape" in currently
active versions. [HTML 4.0]

Again, huh?

I can get image maps to work as expected using <areaonly,
in which case the text below the image no longer has active
links of its own.

I can get the functionality I want by combining both <area>
and <awithin the <map>, but as far as I can see that shouldn't
be necessary - as I said, it works fine in Firefox (and Opera 9)
but not Safari (nor Mozilla 1.7).

Anyone run into this before?

[Bergamot]

David Stone wrote:

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

On an unrelated note, why are you using gifs for those photos? That is
the wrong format for those types of pictures. Jpgs will be much better
quality, and smaller downloads. That 60KB faas.gif should only be about
20KB as a jpg.

--
Berg

[David Stone]

In article <68************ *@mid.individua l.net>,
Bergamot <be******@visi. comwrote:

David Stone wrote:

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

On an unrelated note, why are you using gifs for those photos? That is
the wrong format for those types of pictures. Jpgs will be much better
quality, and smaller downloads. That 60KB faas.gif should only be about
20KB as a jpg.

Good point - I'll add it to the long list of things I want to
change about those pages!

[Mason C]

On Mon, 12 May 2008 15:58:36 -0400, David Stone <no******@domai n.invalidwrote:

>Run into something recently that has left me a little puzzled.

According to the examples in section 13.6.1 of html 4.01...

<http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1.1>

I should be able to use <aelements with a specified
shape and coords within a <mapso that I can use the
links with an actual image and, at the same time, have the
links appear as text. Something like the map associated with
the large image at the top of this page:

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

This validates perfectly well, and functions as expected in
Firefox 2 (Mac). In Safari 3 (Mac), however, only the text
versions of the links work; none of the three rectangular
areas defined in the <atags are active.

Huh? Am I missing something here?

Further, Dreamweaver's (CS3 version) built-in validator objects
to the shape and coords attributes with the following message:

"The tag: "a" doesn't have an attribute "shape" in currently
active versions. [HTML 4.0]

Again, huh?

I can get image maps to work as expected using <areaonly,
in which case the text below the image no longer has active
links of its own.

I can get the functionality I want by combining both <area>
and <awithin the <map>, but as far as I can see that shouldn't
be necessary - as I said, it works fine in Firefox (and Opera 9)
but not Safari (nor Mozilla 1.7).

Anyone run into this before?

I hate it when people respond peripherally to the question.
I don't think the links on the map work very well. It took me
a while to figure out what was intended. On a map of the
world one could certainly use links to the nations. On a
photo such as this it didn't work for me.

Sorry about that,

Mason C

[David Stone]

In article <fc************ *************** *****@4ax.com>,
Mason C <ma*******@XXXf rontal-lobe.infowrote:

On Mon, 12 May 2008 15:58:36 -0400, David Stone <no******@domai n.invalid>

According to the examples in section 13.6.1 of html 4.01...

<http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1.1>

I should be able to use <aelements with a specified
shape and coords within a <mapso that I can use the
links with an actual image and, at the same time, have the
links appear as text. Something like the map associated with
the large image at the top of this page:

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

This validates perfectly well, and functions as expected in
Firefox 2 (Mac). In Safari 3 (Mac), however, only the text
versions of the links work; none of the three rectangular
areas defined in the <atags are active.

Huh? Am I missing something here?

[snip]

>
I hate it when people respond peripherally to the question.
I don't think the links on the map work very well. It took me
a while to figure out what was intended. On a map of the
world one could certainly use links to the nations. On a
photo such as this it didn't work for me.

It would work better 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".

I wanted to see if I could use hover on the a elements to
add visual cues, but that looks like being even more of a
nightmare given the range of browser implementations .

The reason for sticking with the photo is that this is for
students who will be going into the lab to use the actual
instrument shown. I guess I could add some visual cues to
the actual image - the Astronomy Picture of the Day site
does some neat things with some of their images.

Incidentally, I filed a bug report in Safari on the issue...

[GTalbot]

On 14 mai, 08:15, David Stone <no.em...@domai n.invalidwrote:

In article <fcok24loc89gdv evfjd2apjs89841 [e-mail]>,
Mason C <masonc...@XXXf rontal-lobe.infowrote:

On Mon, 12 May 2008 15:58:36 -0400, David Stone <no.em...@domai n.invalid>

>According to the examples in section 13.6.1 of html 4.01...

><http://www.w3.org/TR/html401/struct/objects.html#h-13.6.1.1>

>I should be able to use <aelements with a specified
>shape and coords within a <mapso that I can use the
>links with an actual image and, at the same time, have the
>links appear as text. Something like the map associated with
>the large image at the top of this page:

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

>This validates perfectly well, and functions as expected in
>Firefox 2 (Mac). In Safari 3 (Mac), however, only the text
>versions of the links work; none of the three rectangular
>areas defined in the <atags are active.

>Huh? Am I missing something here?

[snip]

I hate it when people respond peripherally to the question.
I don't think the links on the map work very well. It took me
a while to figure out what was intended. On a map of the
world one could certainly use links to the nations. On a
photo such as this it didn't work for me.

It would work better 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".

I wanted to see if I could use hover on the a elements to
add visual cues, but that looks like being even more of a
nightmare given the range of browser implementations .

The reason for sticking with the photo is that this is for
students who will be going into the lab to use the actual
instrument shown. I guess I could add some visual cues to
the actual image - the Astronomy Picture of the Day site
does some neat things with some of their images.

Incidentally, I filed a bug report in Safari on the issue...

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

Do not use the same identifier! Use distinct, specific, separate
identifiers.

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.

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

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

Regards, Gérard

[David Stone]

In article
<99************ *************** *******@l42g200 0hsc.googlegrou ps.com>,
GTalbot <ne*******@gtal bot.orgwrote:

On 14 mai, 08:15, David Stone <no.em...@domai n.invalidwrote:

[snip]

I should be able to use <aelements with a specified
shape and coords within a <mapso that I can use the
links with an actual image and, at the same time, have the
links appear as text. Something like the map associated with
the large image at the top of this page:

<http://www.chem.utoron to.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?

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.

>
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. 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 :(

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? I've not run into that problem to date. I've added the
type anyway, but it's interesting to note that neither of the W3C
validators (html of css) gave so much as a warning abut it!

>
Regards, Gérard

[GTalbot]

On 15 mai, 08:20, David Stone <no.em...@domai n.invalidwrote:

<http://www.chem.utoron to.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,1 00,225"
alt="Graphite Furnace">
</map>

<p class="centred" >Parts of the AA:
<a href="#lamps">L ight Sources</a|
<a href="#burner"> Burner/Spray Chamber</a|
<a href="./gfaas.html">Gra phite 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