473,597 Members | 2,342 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
Jun 27 '08 #2
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!
Jun 27 '08 #3
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
Jun 27 '08 #4
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...
Jun 27 '08 #5
On 14 mai, 08:15, David Stone <no.em...@domai n.invalidwrote:
In article <fcok24loc89gdv evfjd2apjs89841 e5...@4ax.com>,
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
Jun 27 '08 #6
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
Jun 27 '08 #7
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
Jun 27 '08 #8

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

Similar topics

4
5384
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 images into one large image in a panel, but how do I make the individual pieces clickable like webpage links(in wxPython)? The goal is to add an event handler that displays the image piece in a different panel, along with attributes. Which I could do...
4
2207
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 I'm testing in Lynx. Lynx plays it clever and when I "enter" the map it shows only 3 links no matter there are 5 AREAs (3 point to a same reference). I don't like Lynx displays the 'alt' text and not the link titles
6
1500
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 (Mac). If you have Safari, could you please take a look to see if the links work, and if not, can you speculate as to why not? The URL is http://www.vertaal.org/spel/ .
1
1567
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 all browsers except Konqueror/Safari, where it displays the first image link you click on in the tree of links. But then subsequent clicks on other links do nothing. That is, the first time you click on a DHTML-generated link,
6
4743
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 the area element implies a link to some other item or page location, but would like to hear what others think. If it helps at all, the page which prompted me to ask the question is this one: ...
5
15574
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: right li = display: inline li a = display: block; float: left
11
2432
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+, Firefox, Opera). It also works for all Safari versions before 3.1. It's as if they've deliberately made a change to prevent some actions in the unload handler. Has anyone heard of such a restriction? Here's the test case:
11
3003
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 width="50%"></TD> <TD width="110"><a href="index.php"><IMG SRC="{image-path}matrix_03.gif" WIDTH=110 HEIGHT=40 ALT="Homepage" border="0" onmouseover="myOn('matrix_03')" onmouseout="myOut('matrix_03')"></a></TD> <TD width="100"><a...
0
7886
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8381
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
8035
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8258
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
5847
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5431
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
3886
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
3927
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2404
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

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.