Click here to get back home

Safari, image maps, and links

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Safari, image maps, and links David Stone 05-12-2008
Posted by David Stone on May 12, 2008, 3:58 pm
Please log in for more thread options
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 <a> elements with a specified
shape and coords within a <map> so 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 <a> tags 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 <area> only,
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 <a> within 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?

Posted by Bergamot on May 12, 2008, 7:25 pm
Please log in for more thread options

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

Posted by David Stone on May 13, 2008, 8:31 am
Please log in for more thread options

> 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!

Posted by Mason C on May 13, 2008, 11:52 pm
Please log in for more thread options

>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 <a> elements with a specified
>shape and coords within a <map> so 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 <a> tags 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 <area> only,
>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 <a> within 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

Posted by David Stone on May 15, 2008, 8:20 am
Please log in for more thread options
In article

[snip]> >
> > > >I should be able to use <a> elements with a specified
> > > >shape and coords within a <map> so 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 <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. 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

Similar ThreadsPosted
Creating image maps with Adobe Illustrator or Image Ready. March 8, 2005, 12:42 pm
Image maps within
April 23, 2007, 12:43 am
client side image maps August 9, 2004, 7:04 pm
image maps + xhtml strict October 23, 2004, 9:16 pm
Image maps and area alt text June 14, 2007, 8:08 am
clickable image w/maps moves when clicked April 10, 2008, 10:18 am
Image links in message boards July 29, 2005, 10:43 am
Accessibility of star maps May 11, 2005, 4:10 am
Safari users, help please September 12, 2005, 7:09 am
Interesting Safari Problem December 10, 2004, 8:30 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap