onClick not firing for an ImageMap Area

**Thomas 'PointedEars' Lahn** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

On 5 Jun., 01:09, Dan Rumney <danrum...@warp mail.netwrote:

I have a web page (copied below) with 3 images on it of fixed
dimensions.
Each image has a map associated with it
In the maps, there are a number of areas with an onClick handler
registered (in this sample, just an alert)
>
The HTML is valid.

Another proof that Validation alone is not a mark of service
quality :)

[...]
<area shape="rect" coords="400,0,4 00,30" title="Unalloca ted Memory"
alt="Unallocate d Memory">

The area of this rectangle is 0, ...

.... and it is overlapped by that rectangle.

Like this:

(400, 0) (800, 0)
..----------------.
|| |
|Zoom to FC Usage |
|| |
``----------------'
(400, 30) (800, 30)

You might see that when you are tabbing over the image map.

HTH

PointedEars

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

Thomas 'PointedEars' Lahn wrote:

On 5 Jun., 01:09, Dan Rumney <danrum...@warp mail.netwrote:

>I have a web page (copied below) with 3 images on it of fixed
>dimensions.
>Each image has a map associated with it
>In the maps, there are a number of areas with an onClick handler
>registered (in this sample, just an alert)
>>
>The HTML is valid.

>
Another proof that Validation alone is not a mark of service
quality :)

Ain't that the truth!

I only point it out to demonstrate that this is not due to a bug in the
HTML. Both FF and MSIE should be in 'standards' mode when rendering this
HTML.

>[...]
><area shape="rect" coords="400,0,4 00,30" title="Unalloca ted Memory"
>alt="Unallocat ed Memory">

>
The area of this rectangle is 0, ...
>

><area class="clickabl e" shape="rect" coords="400,0,8 00,30"
>onClick="alert ('fc');" title="Zoom to FC Usage" alt="Zoom to FC Usage">

>
... and it is overlapped by that rectangle.
>
Like this:
>
(400, 0) (800, 0)
..----------------.
|| |
|Zoom to FC Usage |
|| |
``----------------'
(400, 30) (800, 30)
>

This is actually intended. The page is generated on the fly and there
are times when the unallocated space is non-zero

However, I checked out your suggestion and removed the offending area;
it didn't resolve the problem. To be honest, it shouldn't have resolved
it anyway, the page fails to function regardless of where you click on
the image.

Appreciate the input though

**Thomas 'PointedEars' Lahn** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

Dan Rumney wrote:

Thomas 'PointedEars' Lahn wrote:

On 5 Jun., 01:09, Dan Rumney <danrum...@warp mail.netwrote:

[...]
<area shape="rect" coords="400,0,4 00,30" title="Unalloca ted Memory"
alt="Unallocate d Memory">

The area of this rectangle is 0, ...

... and it is overlapped by that rectangle.

Like this:

(400, 0) (800, 0)
..----------------.
|| |
|Zoom to FC Usage |
|| |
``----------------'
(400, 30) (800, 30)

>
This is actually intended. The page is generated on the fly and there
are times when the unallocated space is non-zero
>
However, I checked out your suggestion and removed the offending area;
it didn't resolve the problem. To be honest, it shouldn't have resolved
it anyway,

It might have. User agents do not take kindly to semantic errors of
this magnitude.

the page fails to function regardless of where you click on the image.

/objectBrowser/js/copyServicesUsa ge.js might still interfere.
However, you should post the URL of a test case instead of this many
lines of uncommented code.

Appreciate the input though

You are welcome.

PointedEars

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <PointedE...@we b.de>
wrote:

[snip]

However, you should post the URL of a test case instead of this many
lines of uncommented code.

http://www.danrumney.co.uk/clj/csUsageSample.html

This is slightly different to the original code sample, however, the
problem remains the same.

Thanks

**Robin** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

Dan Rumney wrote:

On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <PointedE...@we b.de>
wrote:
>
[snip]
>

>However, you should post the URL of a test case instead of this many
>lines of uncommented code.

>

http://www.danrumney.co.uk/clj/csUsageSample.html

>
This is slightly different to the original code sample, however, the
problem remains the same.
>
Thanks

Isn't the 'usemap' attribute meant to refer to a URL not name attribute
value.

i.e.
useMap="iog0Map all"
should be
useMap="#iog0Ma pall"

Also, there seem to be a large number of attributes without any quotes
around their values. e.g. <MAP name=iog0Mapall >

Robin

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

Robin wrote:

Dan Rumney wrote:

>On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <PointedE...@we b.de>
>wrote:
>>
>[snip]
>>

>>However, you should post the URL of a test case instead of this many
>>lines of uncommented code.

>>
>http://www.danrumney.co.uk/clj/csUsageSample.html
>>
>This is slightly different to the original code sample, however, the
>problem remains the same.
>>
>Thanks

>
Isn't the 'usemap' attribute meant to refer to a URL not name attribute
value.
>
i.e.
useMap="iog0Map all"
should be
useMap="#iog0Ma pall"

I'll look into that. That's the first time I've ever heard of that being
suggested, but that's not to say that it's without merit. I'll post back
what I find

Also, there seem to be a large number of attributes without any quotes
around their values. e.g. <MAP name=iog0Mapall >

Not sure why you're seeing that. The source that I've uploaded and the
source that is viewable via firefox shows no such thing. I'd be
interested to know how you're viewing the source.

Thanks

**Thomas 'PointedEars' Lahn** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

Dan Rumney wrote:

Robin wrote:

>Dan Rumney wrote:

>>On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <PointedE...@we b.de>
>>wrote:
>>>However, you should post the URL of a test case instead of this many
>>>lines of uncommented code.
>>http://www.danrumney.co.uk/clj/csUsageSample.html
>>>
>>This is slightly different to the original code sample, however, the
>>problem remains the same.

>Isn't the 'usemap' attribute meant to refer to a URL not name attribute
>value.

Yes, it is. Good catch.

javascript:wind ow.alert(docume nt.images[0].useMap="#"+doc ument.images[0].useMap);

renders the first image map working.

>i.e.
>useMap="iog0Ma pall"
>should be
>useMap="#iog0M apall"

Correct. See also

<http://www.w3.org/TR/REC-html40/struct/objects.html#ad ef-usemap>

I'll look into that. That's the first time I've ever heard of that being
suggested, but that's not to say that it's without merit. I'll post back
what I find

FWIW, this is what I had drafted elsewhere on Google Groups *before*
I read Robin's posting with Thunderbird here now:

----
When you Tab through this document in IE 7, you will observe that the image
map areas are never focused, in contrast to image maps on other Web sites,
e.g. <http://de.selfhtml.org/html/grafiken/anzeige/img_usemap.htm> . This
would indicate that something is wrong with your image map already. So it
is entirely possible that it is not a script problem. (However, have you
tried disabling the script includes as recommended?)

This might be wrong:

| <map name="iog0Mapal l">
| <area class="clickabl e" shape="rect" coords="0,0,31. 25,30"
^^^^^^^^^^^^
| onclick="zoomGr aph(0,'rc');" title="Zoom to RC Usage"
| alt="Zoom to RC Usage">
| <area shape="rect" coords="31.25,0 ,768.75,30"
| title="Unalloca ted Memory" alt="Unallocate d Memory">
| <area class="clickabl e" shape="rect" coords="768.75, 0,800,30"
^^^^^^^^^^^^^^^
| onclick="zoomGr aph(0,'fc');"
| title="Zoom to FC Usage" alt="Zoom to FC Usage">
| </map>

Because the HTML 4.01 DTDs says:

| <!ATTLIST AREA
| %attrs; -- %coreattrs, %i18n, %events --
| shape %Shape; rect -- controls interpretation of coords --
| coords %Coords; #IMPLIED -- comma-separated list of lengths --

and

| <!ENTITY % Coords "CDATA" -- comma-separated list of lengths -->

But the HTML 4.01 Specification's prose says:

,-<http://www.w3.org/TR/REC-html40/types.html#h-6.6>
|
| 6.6 Lengths
|
| HTML specifies three types of length values for attributes:
|
| 1. Pixels: The value (%Pixels; in the DTD) is an integer that
| represents the number of pixels of the canvas (screen, paper).
| Thus, the value "50" means fifty pixels. For normative
| information about the definition of a pixel, please consult [CSS1].
| 2. Length: The value (%Length; in the DTD) may be either a %Pixel;
| or a percentage of the available horizontal or vertical space.
| Thus, the value "50%" means half of the available space.
| 3. MultiLength: The value ( %MultiLength; in the DTD) may be a
| %Length; or a relative length. A relative length has the form
| "i*", where "i" is an integer. When allotting space among elements
| competing for that space, user agents allot pixel and percentage
| lengths first, then divide up remaining available space among
| relative lengths. Each relative length receives a portion of
| the available space that is proportional to the integer preceding
| the "*". The value "*" is equivalent to "1*". Thus, if 60 pixels
| of space are available after the user agent allots pixel and
| percentage space, and the competing relative lengths are 1*, 2*,
| and 3*, the 1* will be alloted 10 pixels, the 2* will be alloted
| 20 pixels, and the 3* will be alloted 30 pixels.
|
| Length values are case-neutral.

31.25 is obviously no integer. The W3C Validator cannot recognize this
error because it validates against the DTD which says CDATA (arbitrary
character data).[1] However, the Specification's prose is normative, too
(unless explicitly stated otherwise for a section). And as I have never
seen fixed-point values in image map coordinates since they were introduced
in HTML 3.2 (and it makes little sense to divide a pixel), I would assume
the comment means `%Length' when it says `length' (CMIIW).

It might be that Gecko is more forgiving here.[2] However, my attempts to
assign .coords = "0,0,31,30" via scripting in IE instead have unfortunately
not resulted in appropriate display. So the error might be elsewhere.[3]

I noted that document.compat Mode yields "BackCompat " there, i.e. _not_
rendering in Standards Mode ("CSS1Compat ") as you stated. This is because of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

I suggest you try using

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

instead. (The system identifier [URI of the DTD] is necessary to escape
Quirks/Compatibility Mode, see <http://quirksmode.org/>.)

See also
<http://validator.w3.or g/check?uri=http://www.danrumney.c o.uk/clj/csUsageSample.h tml>
which shows some errors that might contribute to the problem.

You can try <http://getfirebug.com/lite.htmlfor tracking the problem.
----

[1] Obviously now, the W3C Validator also cannot recognize that "#foo"
is required when "foo" was written, because both match %URI:

| <!ENTITY % URI "CDATA"
| -- a Uniform Resource Identifier,
| see [URI]
| -->

[2] And, in fact, it is more forgiving about the `usemap' attribute value.
[3] Which is obvious now, however the other things should be fixed as well.

>Also, there seem to be a large number of attributes without any quotes
>around their values. e.g. <MAP name=iog0Mapall >

>
Not sure why you're seeing that. The source that I've uploaded and the
source that is viewable via firefox shows no such thing. I'd be
interested to know how you're viewing the source.

Probably using the .innerHTML property.

PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f806at$ail$1$8 300dec7@news.de mon.co.uk>

**Dan Rumney** · Jun 27 '08, 07:13 PM

Re: onClick not firing for an ImageMap Area

Thomas 'PointedEars' Lahn wrote:

[snip]

>>Isn't the 'usemap' attribute meant to refer to a URL not name attribute
>>value.

>
Yes, it is. Good catch.
>
>
javascript:wind ow.alert(docume nt.images[0].useMap="#"+doc ument.images[0].useMap);
>
renders the first image map working.
>

>>i.e.
>>useMap="iog0M apall"
>>should be
>>useMap="#iog0 Mapall"

>
Correct. See also
>
<http://www.w3.org/TR/REC-html40/struct/objects.html#ad ef-usemap>
>

[snip]

Well colour me educated. Thanks guys; that's precisely the problem.

>
This might be wrong:
>
| <map name="iog0Mapal l">
| <area class="clickabl e" shape="rect" coords="0,0,31. 25,30"
^^^^^^^^^^^^
| onclick="zoomGr aph(0,'rc');" title="Zoom to RC Usage"
| alt="Zoom to RC Usage">
| <area shape="rect" coords="31.25,0 ,768.75,30"
| title="Unalloca ted Memory" alt="Unallocate d Memory">
| <area class="clickabl e" shape="rect" coords="768.75, 0,800,30"
^^^^^^^^^^^^^^^
| onclick="zoomGr aph(0,'fc');"
| title="Zoom to FC Usage" alt="Zoom to FC Usage">
| </map>
>

[snip]

Fair comment. You're correct that non integer pixel length are not
allowed, but it wasn't the source of the problem and doesn't seem to
cause browsers any issue anyway. I'll leave them as is for now.

[snip]

>
I noted that document.compat Mode yields "BackCompat " there, i.e. _not_
rendering in Standards Mode ("CSS1Compat ") as you stated. This is because of
>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
>
I suggest you try using
>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
>
instead. (The system identifier [URI of the DTD] is necessary to escape
Quirks/Compatibility Mode, see <http://quirksmode.org/>.)

Much appreciated for the catch. I've rectified that

See also
<http://validator.w3.or g/check?uri=http://www.danrumney.c o.uk/clj/csUsageSample.h tml>
which shows some errors that might contribute to the problem.

Yeah, that was some crap that my browser threw in because of some
internal plugins that we have. I'd saved a copy of my page from an
internal server and then uploaded the files to my webserver... I forgot
to take out the junk the plugins threw in.

You can try <http://getfirebug.com/lite.htmlfor tracking the problem.

Oooh... that's a nice little goodie. Thanks for the tip
[snip]

>

>>Also, there seem to be a large number of attributes without any quotes
>>around their values. e.g. <MAP name=iog0Mapall >

>Not sure why you're seeing that. The source that I've uploaded and the
>source that is viewable via firefox shows no such thing. I'd be
>interested to know how you're viewing the source.

>
Probably using the .innerHTML property.

I'm not sure I understand what you're saying here. First, I'm not sure
why someone would be using the .innerHTML property to view the source of
a page they have in their browser.

Second, I'm not sure why this would strip out quotes around element names.

Perhaps it's academic,anyway , because the quotes are in there.

Thanks for your help, guys

onClick not firing for an ImageMap Area

onClick not firing for an ImageMap Area

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment