|  | onClick not firing for an ImageMap Area |  | |
| | | Dan Rumney |  |
| Posted: Wed Jun 04, 2008 11:09 pm Post subject: 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</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&iog=0&height=30&width=800&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&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&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&iog=1&height=30&width=800&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&iog=2&height=30&width=800&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&iog=3&height=30&width=800&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> |
| |
| | | Dan Rumney |  |
| Posted: Thu Jun 05, 2008 11:07 am Post subject: Re: onClick not firing for an ImageMap Area |  |
| |  | |
Thomas 'PointedEars' Lahn wrote:
| Quote: | On 5 Jun., 01:09, Dan Rumney <danrum...@warpmail.net> wrote: 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, ...
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 |
| |
| | | Thomas 'PointedEars' Lahn |  |
| Posted: Thu Jun 05, 2008 12:26 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
On 5 Jun., 01:09, Dan Rumney <danrum...@warpmail.net> wrote:
| 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: | 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)
You might see that when you are tabbing over the image map.
HTH
PointedEars |
| |
| | | Robin |  |
| Posted: Thu Jun 05, 2008 1:41 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
Dan Rumney wrote:
| Quote: | On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <PointedE...@web.de wrote:
[snip]
However, you should post the URL of a test case instead of this many lines of uncommented code.
LINK
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 |
| |
| | | Thomas 'PointedEars' Lahn |  |
| Posted: Thu Jun 05, 2008 2:00 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
| |  | |
Dan Rumney wrote:
| Quote: | Thomas 'PointedEars' Lahn wrote: On 5 Jun., 01:09, Dan Rumney <danrum...@warpmail.net> wrote: [...] area shape="rect" coords="400,0,400,30" title="Unallocated Memory" alt="Unallocated Memory"
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"
... 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 |
| |
| | | Dan Rumney |  |
| Posted: Thu Jun 05, 2008 2:45 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
| |  | |
Robin wrote:
| Quote: | Dan Rumney wrote: On Jun 5, 10:00 am, "Thomas 'PointedEars' Lahn" <PointedE...@web.de wrote:
[snip]
However, you should post the URL of a test case instead of this many lines of uncommented code.
LINK
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 |  |
| Posted: Thu Jun 05, 2008 2:57 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
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.
|
LINK
This is slightly different to the original code sample, however, the problem remains the same.
Thanks |
| |
| | | Thomas 'PointedEars' Lahn |  |
| Posted: Thu Jun 05, 2008 5:19 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
| |  | |
Dan Rumney wrote:
| Quote: | Robin wrote: Dan Rumney wrote: 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. LINK
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.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.
| 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> |
| |
| | | Dan Rumney |  |
| Posted: Thu Jun 05, 2008 6:24 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
| |  | |
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.
i.e. useMap="iog0Mapall" should be useMap="#iog0Mapall"
Correct. See also
LINK
|
[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 LINK 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.html> for tracking the problem.
|
Oooh... that's a nice little goodie. Thanks for the tip [snip]
| 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 |
| |
| | | Thomas 'PointedEars' Lahn |  |
| Posted: Thu Jun 05, 2008 6:49 pm Post subject: Re: onClick not firing for an ImageMap Area |  |
| |  | |
Dan Rumney wrote:
| Quote: | 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.
|
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 <http://www.w3.org/TR/REC-html40/appendix/notes.html#h-B.1>.
| 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.
|
I don't either. However, when quotes are stripped that are in the HTML source code this is often the result of serialization.
| Quote: | Second, I'm not sure why this would strip out quotes around element names.
|
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:
LINK
| Quote: | Perhaps it's academic,anyway, because the quotes are in there.
|
Good, this is recommended. (See above.)
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> |
| |
| Page 1 of 2 .:. Goto page 1, 2 Next | |
|
|