onClick not firing for an ImageMap Area

D

Dan Rumney

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>&lt;75%</li>
<li>&lt;90%</li>
<li>&gt;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</span> Usage</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&amp;iog=0&amp;height=30&amp;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&amp;iog=0&amp;height=30&amp;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&amp;iog=0&amp;height=30&amp;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</span> Usage</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&amp;iog=1&amp;height=30&amp;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</span> Usage</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&amp;iog=2&amp;height=30&amp;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</span> Usage</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&amp;iog=3&amp;height=30&amp;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>&lt;
75% of Allocated Space</td>
<td style="width:1em;background-color:#cc9966;"></td><td>&lt;
90% of Allocated Space</td>
<td style="width:1em;background-color:#ffcc99;"></td><td>&gt;
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">&nbsp;</td>
</tr>
<tr>
<td style="width:1em;background-color:#000000;"></td><td>Used
Space</td>
<td colspan="6">&nbsp;</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>
 
T

Thomas 'PointedEars' Lahn

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.
Click to expand...

Another proof that Validation alone is not a mark of service
quality :)
[...]
<area shape="rect" coords="400,0,400,30" title="Unallocated Memory"
alt="Unallocated Memory">
Click to expand...

The area of this rectangle is 0, ...
<area class="clickable" shape="rect" coords="400,0,800,30"
onClick="alert('fc');" title="Zoom to FC Usage" alt="Zoom to FC Usage">
Click to expand...

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

Thomas 'PointedEars' Lahn

Dan said:
Thomas said:
[...]
<area shape="rect" coords="400,0,400,30" title="Unallocated Memory"
alt="Unallocated Memory">
Click to expand...

The area of this rectangle is 0, ...
<area class="clickable" shape="rect" coords="400,0,800,30"
onClick="alert('fc');" title="Zoom to FC Usage" alt="Zoom to FC Usage">
Click to expand...

... and it is overlapped by that rectangle.

Like this:

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

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,
Click to expand...

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.
Click to expand...

/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.
Appreciate the input though
Click to expand...

You are welcome.


PointedEars
 
R

Robin

Dan said:
On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <[email protected]>
wrote:

[snip]
However, you should post the URL of a test case instead of this many
lines of uncommented code.
Click to expand...

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

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

Thanks
Click to expand...

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
 
T

Thomas 'PointedEars' Lahn

Yes, it is. Good catch.


javascript:window.alert(document.images[0].useMap="#"+document.images[0].useMap);

renders the first image map working.

Correct. See also

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
Click to expand...

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.html> for 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.
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.
Click to expand...

Probably using the .innerHTML property.


PointedEars
 
T

Thomas 'PointedEars' Lahn

Dan said:
Thomas 'PointedEars' Lahn wrote:
[...] 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.
Click to expand...

I strongly suggest you don't. A handful of browser tests have never been
sufficient in order to determine whether fantasy code causes an issue. See
also said:
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.
Click to expand...

I don't either. However, when quotes are stripped that are in the HTML
source code this is often the result of serialization.
Second, I'm not sure why this would strip out quotes around element names.
Click to expand...

It is known that .innerHTML does that, particularly in IE. This would be a
correct serialization of the element because quotes are not necessary for
certain attribute values in HTML:

http://www.w3.org/TR/REC-html40/intro/sgmltut.html#h-3.2.2
Perhaps it's academic,anyway, because the quotes are in there.
Click to expand...

Good, this is recommended. (See above.)


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Sort by number of characters 1
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How can I calculate the last payment of the year to be the sum of all previous payments for that year and subtracting it from Research Costs value? 7
Filter table rows based on multiple checkboxes value 2
Angularjs newbie - second JSON datasource does not display 0
SendGrid email issue in responsive Gmail 1
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 150 (members: 0, guests: 150)
Robots: 60

Forum statistics

Threads
473,882
Messages
2,569,948
Members
46,267
Latest member
TECHSCORE

Latest Threads

Top