onClick not firing for an ImageMap Area

All,

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.

It works perfectly in FireFox, but for some reason, it doesn't work in
MSIE (I'm using MSIE 7). No errors get flagged by the browser, it just
doesn't do anything when clicked.

Has anyone seen this problem before and, better yet, does anyone know
a solution for it?

Thanks

Dan

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

<html>
<head>
<title>Copy Services Usage for ITEBO1</title>
<link rel="stylesheet" type="text/css" href="/objectBrowser/css/
main.css" >
<link rel="stylesheet" type="text/css" href="/objectBrowser/css/
csUsage.css" >
<script type="text/javascript" src="/objectBrowser/js/
copyServicesUsage.js"></script>
</head>
<body>
<h1>Copy Services Usage for ITEBO1</h1>
<p>This report shows Copy Services Usage for ITEBO1</p>
<p>The shaded parts at the left and the right of each graph shows
the memory
space allocated to each of the copy services in each IO Group</
p>
<p>If space has been used, a black bar will show how much of this
space is
in use.</p>
<p>The graded shading in the allocated space provides an
inidication of how
much space is in use:
<ul>
<li><75%</li>
<li><90%</li>
<li>>100%</li>
</ul>
<p>By clicking on the appropriate Copy Service region on a graph,
you can
zoom in for more detail. Click again to zoom back out
</p>
<table>
<tbody id="iog0Usage">
<tr style="height:2em;">
<td colspan="3"><h3>IO Group 0 - <span id="iog0Span">Copy
Services</spanUsage</h3></td>
</tr>
<tr id="iog0all" style="height:3em;">
<td style="width:3em;"><span class="serviceLabel">RC</span></
td>
<td style="width:800;">
<img style="border:0;width:800px;height:30px" src="/cgi-bin/
objectBrowser/reports/csGraph.pl?
snapKey=128&iog=0&height=30&width=800& amp;service=all"
alt="IO Group 0 Copy Services Usage" usemap="iog0Mapall">
<map name="iog0Mapall">
<area class="clickable" shape="rect" coords="0,0,400,30"
onClick="alert('rc');" title="Zoom to RC Usage" alt="Zoom to RC
Usage">
<area shape="rect" coords="400,0,400,30" title="Unallocated
Memory" alt="Unallocated Memory">
<area class="clickable" shape="rect" coords="400,0,800,30"
onClick="alert('fc');" title="Zoom to FC Usage" alt="Zoom to FC
Usage">
</map>
</td>
<td style="width:3em;">
<span class="serviceLabel">FC</span>
</td>
</tr>

<tr id="iog0fc" style="display:none;height:3em;">
<td style="width:3em;"></td>
<td style="width:800;">
<img style="border:0;width:800px;height:30px" src="/cgi-bin/
objectBrowser/reports/csGraph.pl?
snapKey=128&iog=0&height=30&width=800& amp;service=fc"
alt="IO Group 0 Flash Copy Usage" usemap="iog0Mapfc">
<map name="iog0Mapfc">
<area class="clickable" shape="rect" coords="0,0,800,30"
onClick="alert('all');" title="Zoom to All Usage" alt="Zoom to All
Usage">
</map>
</td>
<td style="width:3em;"></td>
</tr>

<tr id="iog0rc" style="display:none;height:3em;">
<td style="width:3em;"></td>
<td style="width:800;">
<img style="border:0;width:800px;height:30px" src="/cgi-bin/
objectBrowser/reports/csGraph.pl?
snapKey=128&iog=0&height=30&width=800& amp;service=rc"
alt="IO Group 0 Remote Copy Usage" usemap="iog0Maprc">
<map name="iog0Maprc">
<area class="clickable" shape="rect" coords="0,0,800,30"
onClick="alert('all');" title="Zoom to All Usage" alt="Zoom to All
Usage">
</map>
</td>
<td style="width:3em;"></td>
</tr>
</tbody>

<tbody id="iog1Usage">
<tr style="height:2em;">
<td colspan="3"><h3>IO Group 1 - <span id="iog1Span">Copy
Service</spanUsage</h3></td>
</tr>
<tr id="iog1all" style="height:3em;">
<td style="width:2.3em;"></td>
<td style="width:800;">
<img style="border:0;" src="/cgi-bin/objectBrowser/reports/
csGraph.pl?
snapKey=128&iog=1&height=30&width=800& amp;service=all"
alt="Empty IO Group">
</td>
<td style="width:2.3em;">
</td>
</tr>
</tbody>
<tbody id="iog2Usage">
<tr style="height:2em;">
<td colspan="3"><h3>IO Group 2 - <span id="iog2Span">Copy
Service</spanUsage</h3></td>
</tr>
<tr id="iog2all" style="height:3em;">
<td style="width:2.3em;"></td>
<td style="width:800;">
<img style="border:0;" src="/cgi-bin/objectBrowser/reports/
csGraph.pl?
snapKey=128&iog=2&height=30&width=800& amp;service=all"
alt="Empty IO Group">
</td>
<td style="width:2.3em;">
</td>
</tr>
</tbody>
<tbody id="iog3Usage">
<tr style="height:2em;">
<td colspan="3"><h3>IO Group 3 - <span id="iog3Span">Copy
Service</spanUsage</h3></td>
</tr>
<tr id="iog3all" style="height:3em;">
<td style="width:2.3em;"></td>
<td style="width:800;">
<img style="border:0;" src="/cgi-bin/objectBrowser/reports/
csGraph.pl?
snapKey=128&iog=3&height=30&width=800& amp;service=all"
alt="Empty IO Group">
</td>
<td style="width:2.3em;">
</td>
</tr>
</tbody>
</table>
<table summary="Graph Legend">
<tr>
<td style="width:1em;background-color:#996633;"></td><td><
75% of Allocated Space</td>
<td style="width:1em;background-color:#cc9966;"></td><td><
90% of Allocated Space</td>
<td style="width:1em;background-color:#ffcc99;"></td><td>>
90% of Allocated Space</td>
<td style="width:1em;background-color:#ffffcc;"></
td><td>Unallocated Space</td>
</tr>
<tr>
<td style="width:1em;background-color:#ccccff;"></td><td>No
Nodes</td>
<td colspan="6"> </td>
</tr>
<tr>
<td style="width:1em;background-color:#000000;"></td><td>Used
Space</td>
<td colspan="6"> </td>
</tr>
</table>
<div>
<h2>Usage Table</h2>
<p>Values given in kiloBytes.</p>
<table summary="Copy Services Memory Usage" id="csUsageTable">
<tr>
<th rowspan="2">IO Group</th><th colspan="2">Remote Copy</
th><th colspan="2">Flash Copy</th><th rowspan="2">Unallocated</th>
</tr>
<tr>
<th>Allocated</th><th>Used</th><th>Allocated</th><th>Used</
th>
</tr>
<tr>
<td>0</td>
<td>8192</td>
<td>0</td>
<td>8192</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>1</td>
<td colspan="5" style="font-style:italic">No Nodes</td>
</tr>
<tr>
<td>2</td>
<td colspan="5" style="font-style:italic">No Nodes</td>
</tr>
<tr>
<td>3</td>
<td colspan="5" style="font-style:italic">No Nodes</td>
</tr>
</table>
</div>
</body>
</html>

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

Quote:

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 :)

Quote:

[...]
<area shape="rect" coords="400,0,400,30" title="Unallocated Memory"
alt="Unallocated Memory">

The area of this rectangle is 0, ...

Quote:

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

Thomas 'PointedEars' Lahn wrote:

Quote:

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

Quote:

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

Quote:

>[...]
><area shape="rect" coords="400,0,400,30" title="Unallocated Memory"
>alt="Unallocated Memory">

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

Quote:

><area class="clickable" shape="rect" coords="400,0,800,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

Dan Rumney wrote:

Quote:

Thomas 'PointedEars' Lahn wrote:

Quote:

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

Quote:

[...]
<area shape="rect" coords="400,0,400,30" title="Unallocated Memory"
alt="Unallocated Memory">

The area of this rectangle is 0, ...

Quote:

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

Quote:

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

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

Quote:

Appreciate the input though

You are welcome.

PointedEars

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

[snip]

Quote:

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

Dan Rumney wrote:

Quote:

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

Quote:

>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="iog0Mapall"
should be
useMap="#iog0Mapall"

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

Robin

Robin wrote:

Quote:

Dan Rumney wrote:

Quote:

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

Quote:

>>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="iog0Mapall"
should be
useMap="#iog0Mapall"

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

Quote:

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

Dan Rumney wrote:

Quote:

Robin wrote:

Quote:

>Dan Rumney wrote:

Quote:

>>On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <PointedE...@web.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:window.alert(document.images[0].useMap="#"+document.images[0].useMap);

renders the first image map working.

Quote:

>i.e.
>useMap="iog0Mapall"
>should be
>useMap="#iog0Mapall"

Correct. See also

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

Quote:

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="iog0Mapall">
| <area class="clickable" shape="rect" coords="0,0,31.25,30"
^^^^^^^^^^^^
| onclick="zoomGraph(0,'rc');" title="Zoom to RC Usage"
| alt="Zoom to RC Usage">
| <area shape="rect" coords="31.25,0,768.75,30"
| title="Unallocated Memory" alt="Unallocated Memory">
| <area class="clickable" shape="rect" coords="768.75,0,800,30"
^^^^^^^^^^^^^^^
| onclick="zoomGraph(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.compatMode 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.org/check?uri=http://www.danrumney.co.uk/clj/csUsageSample.html>
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.

Quote:

>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$8300dec7@news.demon.co.uk>

Thomas 'PointedEars' Lahn wrote:

[snip]

Quote:

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

>
Yes, it is. Good catch.
>
>
javascript:window.alert(document.images[0].useMap="#"+document.images[0].useMap);
>
renders the first image map working.
>

Quote:

>>i.e.
>>useMap="iog0Mapall"
>>should be
>>useMap="#iog0Mapall"

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

[snip]

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

Quote:

>
This might be wrong:
>
| <map name="iog0Mapall">
| <area class="clickable" shape="rect" coords="0,0,31.25,30"
^^^^^^^^^^^^
| onclick="zoomGraph(0,'rc');" title="Zoom to RC Usage"
| alt="Zoom to RC Usage">
| <area shape="rect" coords="31.25,0,768.75,30"
| title="Unallocated Memory" alt="Unallocated Memory">
| <area class="clickable" shape="rect" coords="768.75,0,800,30"
^^^^^^^^^^^^^^^
| onclick="zoomGraph(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]

Quote:

>
I noted that document.compatMode 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

Quote:

See also
<http://validator.w3.org/check?uri=http://www.danrumney.co.uk/clj/csUsageSample.html>
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.

Quote:

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

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

Quote:

>

Quote:

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

re: onClick not firing for an ImageMap Area

re: onClick not firing for an ImageMap Area

re: onClick not firing for an ImageMap Area

re: onClick not firing for an ImageMap Area

re: onClick not firing for an ImageMap Area

re: onClick not firing for an ImageMap Area

re: onClick not firing for an ImageMap Area

re: onClick not firing for an ImageMap Area

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about