Bug 15035 - Image maps do not enable feedback such as mouseover tooltips
: Image maps do not enable feedback such as mouseover tooltips
Status: UNCONFIRMED
Product: WebKit
Classification: Unclassified
Component: Images
: 523.x (Safari 3)
: Macintosh Mac OS X 10.4
: P2 Enhancement
Assigned To: Nobody
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2007-08-21 00:54 PDT by Robert Burns
Modified: 2011-10-25 14:23 PDT (History)
2 users (show)

See Also:


Attachments
Shows image maps referenced form INPUT and IMG elements with some basic potential CSS (13.27 KB, application/x-webarchive)
2007-08-21 01:35 PDT, Robert Burns
no flags Details
Shows how styles might be applied to AREA elements to provide richer user-experience. (13.83 KB, application/x-webarchive)
2007-08-21 04:28 PDT, Robert Burns
no flags Details
image for test case (134.80 KB, image/jpeg)
2011-10-24 01:07 PDT, bugmenot
no flags Details
area:hover testcase (3.70 KB, text/html)
2011-10-24 01:12 PDT, bugmenot
no flags Details
area:hover testcase (CSS for img:target and area:hover merged) (3.07 KB, text/html)
2011-10-24 01:39 PDT, bugmenot
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Robert Burns 2007-08-21 00:54:06 PDT
When the IMG element uses usemap to point to a client-side image map, WebKit should make use of that image map in several ways in addition to following the links defined by the areas:

 1) it should provide tooltips from the area element's title attribute upon
mouse-over on those mapped areas (this is not so much an enhancement as a bug compared to the spec);
 2 )To accomplish (1) and more, it should map the area elements within the map element to the appropriate coordinates and shapes onto the embedded image: basically drawing a WebFrame (though not necessarily a rectangular one) for each AREA element (these may be overlapping WebFrames too).
 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 mouse and other events
   b) focus outline indication
   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 follows the appropriate URL specified by the area's href attribute but does not provide any of the visual feedback of the image map. This is an area where WebKit could excel over other engines.
Comment 1 Robert Burns 2007-08-21 01:04:39 PDT
Some sample HTML that demonstrates the types of enhancements possible. Also when using this in Firefox, the image map does provide tooltips mapped to the areas of the image map (so that part is not so much an enhancement as a genuine WebKit bug).

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

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

<map name=m2>
	<area id=leftarea href='http://www.apple.com/' title='left-side' alt='left-side' shape=rect coords='0,0,100,100' >
	<area id=rightarea href='http://store.apple.com/' title='right-side' alt='right-side' shape=rect coords='100,0,200,100' >
</map>
<img src=image usemap='#m2'>
</p>

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

</body>
</html>

Comment 2 Robert Burns 2007-08-21 01:35:57 PDT
Created attachment 16049 [details]
Shows image maps referenced form INPUT and IMG elements with some basic potential CSS

Since each area could potentially be represented by a WebFrame drawn on the image, WebKit could also CSS styling to be applied to the rendered frames of the AREA elements. These frames can be either circles, rectangles or polygons. However, the CSS box model could still be applied such as 'margin', 'border', 'padding'. Also the CSS UI properties such as 'cursor' and 'outline' could also apply.
Comment 3 Robert Burns 2007-08-21 04:28:47 PDT
Created attachment 16051 [details]
Shows how styles might be applied to AREA elements to provide richer user-experience.
Comment 4 Graham Perrin 2007-11-10 03:21:06 PST
See also http://bugs.webkit.org/show_bug.cgi?id=15793
Comment 5 bugmenot 2011-10-24 01:07:30 PDT
Created attachment 112157 [details]
image for test case
Comment 6 bugmenot 2011-10-24 01:12:14 PDT
Created attachment 112158 [details]
area:hover testcase

This testcase works in gecko and presto engines. Untested in trident (IE9+ required)
Comment 7 bugmenot 2011-10-24 01:39:01 PDT
Created attachment 112159 [details]
area:hover testcase (CSS for img:target and area:hover merged)