Bug 15032 - An OBJECT element with the attribute usemap does not provide client-side image map functionality
Summary: An OBJECT element with the attribute usemap does not provide client-side imag...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Images (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Andreas Kling
URL: http://software.hixie.ch/utilities/js...
Keywords: HTML5
: 19365 56654 (view as bug list)
Depends on:
Blocks:
 
Reported: 2007-08-20 21:39 PDT by Robert Burns
Modified: 2012-09-22 22:13 PDT (History)
7 users (show)

See Also:


Attachments
This demonstrates the different behavior between the client-side image maps when referenced from a INPUT and from and IMG (12.15 KB, application/x-webarchive)
2007-08-21 01:21 PDT, Robert Burns
no flags Details
This attachment replaces the previous one (13.22 KB, application/x-webarchive)
2007-08-21 04:26 PDT, Robert Burns
no flags Details
Proposed patch (5.86 KB, patch)
2011-05-15 17:38 PDT, Andreas Kling
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Robert Burns 2007-08-20 21:39:15 PDT
When the element input uses usemap=IDREF to point to a client-side image map in the same document, WebKit should make use of that image map in several ways.

 1) it should map the area elements within the map element to the appropriate coordinates and shapes onto the image for the input element;
 2) it should provide tooltips from the area element's title attribute upon mouse-over on those mapped areas;
 3) it should treat those areas generally as frames (though not necessarily rectangular frames) with all of the behaviors and methods of those frames, including:
   a) receive events
   b) focus outline indicateion
   c) apply CSS bos model (though not necessarily rectangular) properties including margin, padding, border and outline.
   d) apply CSS :hover and other pseudo selectors to the frames corresponding to the area elements
   e) apply other CSS where appropriate

Currently WebKit submits a form onclick, but does not provide any of the benefits of the usemap attribute.
Comment 1 Robert Burns 2007-08-20 21:40:53 PDT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" >
	<title>Untitled</title>
<style type='text/css'>
input {height: 100px; width: 200px;}
#leftarea {border-style: solid; border-color: red; border-size: 1px; }
#rightarea  {border-style: solid; border-color: blue; border-size: 1px; }

img:hover {cursor: crosshair;}
input:hover {cursor: wait;}
area:hover {cursor: wait;}

</style>

</head>
<body>


<p>
<map name=m>
	<area id=leftarea title='left-side' alt='left-side' shape=rect coords='0,0,100,100' >
	<area id=rightarea title='right-side' alt='right-side' shape=rect coords='100,0,200,100' >
</map>
<img src='image'>
</p>

<form onsubmit='alert("submit")' action=.><input type=image src=image usemap='#m'></form>

</body>
</html>
Comment 2 Maciej Stachowiak 2007-08-21 00:18:59 PDT
This feature is underspecified in HTML4, and not implemented by IE. It is also likely to be dropped in HTML5 and may be removed from Mozilla and Opera as a result.
Comment 3 Alexey Proskuryakov 2007-08-21 00:55:43 PDT
Clearly, breaking compatibility with IE just because of HTML4 spec is not an option for us. This issue is being extensively discussed by the HTML WG right now, so I do not see any reason to rehash the discussion here.

Please re-open this bug if HTML5 draft changes to accommodate this feature.
Comment 4 Robert Burns 2007-08-21 01:10:10 PDT
(In reply to comment #3)
> Clearly, breaking compatibility with IE just because of HTML4 spec is not an
> option for us. This issue is being extensively discussed by the HTML WG right
> now, so I do not see any reason to rehash the discussion here.
> 
> Please re-open this bug if HTML5 draft changes to accommodate this feature.

This would not break compatibility with IE. The point is to provide greater visual feedback to the user. The form should still be submitted as WebKit already does. The title attribute tooltip is based on the existing recommendations. and brings parity with Firefox and Opera. The other enhancements would not break compatibility with anything else, but would set WebKit above the competing implementations.

As for HTML5, by the editors own admission, this is a recommendation that is years away from reaching candidate recommendation status. We cannot wait until then to fix bugs in WebKit or make enhancements. Once it becomes a candidate recommendation, we can consider what changes should happn to WebKit to bring it in line with the new recommendation.

Comment 5 Robert Burns 2007-08-21 01:21:16 PDT
Created attachment 16048 [details]
This demonstrates the different behavior between the client-side image maps when referenced from a INPUT and from and IMG
Comment 6 Robert Burns 2007-08-21 01:24:06 PDT
With this latest attachment,I think the bug is clearly demonstrated. The image maps should behave the same with respect to the @title attribute tooltips. The other features mentioned in the bug are properly feature enhancement requests and filed elsewhere.  However, the bug as written in the summary should  properly be fixed.
Comment 7 Robert Burns 2007-08-21 04:25:14 PDT
I have a new attachment to replace the previous attachment. I think this better illustrates the problem and that it also applies to OBJECT (also the last example had some non-relevant validation errors). Perhaps a succinct way to put this is: Image maps do not enable feedback such as mouseover tooltips and The relevant discussion in the HTML 4.01 recommendation is here:

http://www.w3.org/TR/html4/struct/objects.html#include-maps

and here:

http://www.w3.org/TR/html4/interact/forms.html#h-17.4.1

Comment 8 Robert Burns 2007-08-21 04:26:44 PDT
Created attachment 16050 [details]
This attachment replaces the previous one

Shows how image map behavior is inconsistent across the three elements that support client-side image maps
Comment 9 Gérard Talbot 2008-05-20 13:00:34 PDT
Hello all,

First, an importantissimo and excellent testcase meeting well this bug's summary:

http://haignet.co.uk/object-image-map.htm

Opera 9.26, Opera 9.50, Firefox 3 RC1, Seamonkey 2.0a1 all pass all 4 example-tests in that webpage.

Explorer 8 beta 1 passes example-test 1.2.

Safari 3.1.1 build 525.17.0 fails all 4 example-tests.

Other related/mentioned issues:

HTML 4 and HTML 5 both have usemap as an attribute:

http://www.whatwg.org/specs/web-apps/current-work/#the-object

http://www.whatwg.org/specs/web-apps/current-work/#usemap1

The only changes worth mentioning (so far, at this moment) regarding HTML 4 versus HTML 5 differences is that map and object HTML elements will no longer require (or no longer will use) name attribute and that id attribute should be preferred/used instead. And that W3C draft document was last updated just a few days ago (17 May 2008).

<input type="image" usemap="...">
has not been specified so far in HTML 5:
http://www.whatwg.org/specs/web-apps/current-work/#the-input

Cheers and regards, Gérard (I have just voted for this bug!)
Comment 10 Gérard Talbot 2008-05-20 13:16:25 PDT
Robert,
1-
Could it be possible to split this bug into 2 separate, distinct bugs? ... where bug 15032 new summary would read:
"OBJECT element with attribute usemap do not provide client-side image map functionality"

2-
How to view webarchive file type? I have 7-zip latest version and can not successfully open attachment 16050 [details] (ImageMap.webarchive). 

3-URL http://software.hixie.ch/utilities/js/live-dom-viewer/?... seems not interoperable for Windows users...
Comment 11 Gérard Talbot 2008-05-20 13:28:56 PDT
I believe example-test 2.2 at
http://haignet.co.uk/object-image-map.htm
fails just because of bug 5566
Comment 12 Robert Burns 2008-05-20 13:32:11 PDT
(In reply to comment #10)
> Robert,
> 1-
> Could it be possible to split this bug into 2 separate, distinct bugs? ...
> where bug 15032 new summary would read:
> "OBJECT element with attribute usemap do not provide client-side image map
> functionality"

Fine with me to split it up. I just want to see WebKit excel in image map UI.
 
> 2-
> How to view webarchive file type? I have 7-zip latest version and can not
> successfully open attachment 16050 [details] [edit] (ImageMap.webarchive). 

I'm sorry. I guess I had not considered other browsers when I used that format. You can use Safari on Mac (and probably Windows) to open the file after download. Then it can be saved to as source for use in other browsers.

> 
> 3-URL http://software.hixie.ch/utilities/js/live-dom-viewer/?... seems not
> interoperable for Windows users...
> 

Sorry, I think the utility gets updated from time to time and something might have been broken then.
Comment 13 Gérard Talbot 2008-05-20 16:59:10 PDT
> Fine with me to split it up.

Someone besides me will have to do this as I do not have sufficient edit privileges to edit bug report summaries.

----------

> You can use Safari on Mac (and probably Windows) to open the file after
> download. Then it can be saved to as source for use in other browsers.

Safari 3.1.1 on Windows XP Pro SP3 can not open filetype webarchive.
"Safari can't open the file 'ImageMap.webarchive' because no available application can open it"
It would have been different with a more widely supported compression format that a wide majority of compression softwares can uncompress. Can you upload a reduced testcase in this bug?

----------

Also, I earlier said
"HTML 4 and HTML 5 both have usemap as an attribute"
but meant to explicitly say
HTML 4 and HTML 5 both have usemap as an attribute for <object>s

----------

> The title attribute tooltip is based on the existing
> recommendations. and brings parity with Firefox and Opera. (...)
> The image maps should behave the same with respect to the @title 
> attribute tooltips.(...)
> Image maps do not enable feedback such as mouseover tooltips

Regarding attribute title tooltip for <area>s, this is implemented in Safari 3.1.1 build 525.17.0: hover the mouse cursor over the upper-left blue rectangle and over the middle-centered blue rectangle in this webpage

http://www.mozilla.org/access/qa/tiny/map_area.html

and the correspondent title attribute will be displayed in a tooltip in Safari 3.1.1 for Windows ... just like it is in Firefox 2.0.0.14 and Opera 9.50

Cheers, Gérard
Comment 14 Gérard Talbot 2008-05-20 17:01:57 PDT
" You tried to change the Summary field from (...) to (...) but only the assignee or reporter of the bug, or a sufficiently empowered user may change that field."
Comment 15 Gérard Talbot 2008-06-20 14:39:49 PDT
Bug 19365 is:
<object> element with attribute usemap do not provide client-side image map functionality
Comment 16 Gérard Talbot 2009-06-14 10:25:50 PDT
References update:
-----------------

HTML 4 and HTML 5 both have usemap as an attribute for the HTML object element:

http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-0.html#the-object-element

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-hyperlink-usemap

<input type="image" usemap="..."> still has not been specified so far in HTML 5 and I don't think it will be. usemap attribute for <object> is different though.

regards, Gérard
Comment 17 Alexey Proskuryakov 2010-06-15 08:44:52 PDT
See also: bug 14638.
Comment 18 Darin Adler 2010-11-05 12:57:00 PDT
*** Bug 19365 has been marked as a duplicate of this bug. ***
Comment 19 Andreas Kling 2011-05-15 17:38:02 PDT
Created attachment 93594 [details]
Proposed patch
Comment 20 Andreas Kling 2011-05-16 10:24:06 PDT
*** Bug 56654 has been marked as a duplicate of this bug. ***
Comment 21 Darin Adler 2011-08-23 10:36:27 PDT
Comment on attachment 93594 [details]
Proposed patch

View in context: https://bugs.webkit.org/attachment.cgi?id=93594&action=review

> Source/WebCore/html/HTMLObjectElement.cpp:133
> +    } else if (attr->name() == usemapAttr && isImageType())
> +        setIsLink(!attr->isNull());

This is incomplete. If an object element has a usemap attribute and anything changes that can change the result of isImageType, we will need to call setIsLink at that time too, since it can become false if isImageType becomes false, or become true if isImageType becomes true. Unless there is some reason that it’s OK to have isLink set incorrectly at that time.

I’d like to see test cases covering this. That’s the main thing that’s tricky about correctly implementing object elements as opposed to single-purpose elements like the image element -- dynamically changing between different types of embedded content.
Comment 22 Andreas Kling 2011-08-25 03:53:15 PDT
Comment on attachment 93594 [details]
Proposed patch

Clearing r? until I've fixed the issue Darin pointed out.
Comment 23 Dawit A. 2012-09-22 22:13:05 PDT
Another test link: http://haignet.co.uk/object-image-map.htm.