473,320 Members | 1,863 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

Safari, image maps, and links

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.utoronto.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?
Jun 27 '08 #1
7 5193

David Stone wrote:
>
<http://www.chem.utoronto.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
Jun 27 '08 #2
In article <68*************@mid.individual.net>,
Bergamot <be******@visi.comwrote:
David Stone wrote:

<http://www.chem.utoronto.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!
Jun 27 '08 #3
On Mon, 12 May 2008 15:58:36 -0400, David Stone <no******@domain.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.utoronto.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
Jun 27 '08 #4
In article <fc********************************@4ax.com>,
Mason C <ma*******@XXXfrontal-lobe.infowrote:
On Mon, 12 May 2008 15:58:36 -0400, David Stone <no******@domain.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.utoronto.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...
Jun 27 '08 #5
On 14 mai, 08:15, David Stone <no.em...@domain.invalidwrote:
In article <fcok24loc89gdvevfjd2apjs89841e5...@4ax.com>,
Mason C <masonc...@XXXfrontal-lobe.infowrote:


On Mon, 12 May 2008 15:58:36 -0400, David Stone <no.em...@domain.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.utoronto.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
Jun 27 '08 #6
In article
<99**********************************@l42g2000hsc. googlegroups.com>,
GTalbot <ne*******@gtalbot.orgwrote:
On 14 mai, 08:15, David Stone <no.em...@domain.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.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?
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
Jun 27 '08 #7
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
Jun 27 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Aaron | last post by:
I know this is a thing used primarily on websites..but since python can do anything ;) I'm trying to make a clickable image map for my wxPython program. Basically, I know how to organize the...
4
by: Stanimir Stamenkov | last post by:
I have this kind of construct: http://www.geocities.com/stanio/temp/usemap01.html (an IMG element using MAP described with AREA elements) I'm trying to make it more accessible and currently...
6
by: Throw | last post by:
G'day everyone! I have a site (not validated, not strict anything) which works just fine in my browser (Opera for Windows) but a user recently complained that none of the links work in Safari...
1
by: gubusoft | last post by:
I have a Web page with two frames. The left frame has a DHTML-generated tree of links (to images). The right frame displays the image link you click in the tree of links. It works great on...
6
by: David Stone | last post by:
I have a simple question about the alt content of area elements within an image map: is it redundant to include phrases such as "link to..." or "jump to..."? My initial thought is 'yes', since...
5
by: John | last post by:
Hi Suppose I want a header containing an image floated left and a list of horizontal links floated right. So I float the image left. I then do the following with the list: ul = float:...
11
by: Stevo | last post by:
I've been using the unload event for a long time. I have this code, which I've abstracted and made into a stripped down simple test case below, and it works fine on the major browsers (IE5+,...
11
by: Evolution445 | last post by:
I got this code, and it somehow doesnt work. <TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0 align="center"> <TR> <TD background="{image-path}navfiller.gif" HEIGHT=40...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.