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,
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.
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"
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<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' >
<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' >
<img src=image usemap='#m2'>
<form onsubmit='alert("submit")' action=.><input type=image src=image usemap='#m'></form>
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.
Created attachment 16051 [details]
Shows how styles might be applied to AREA elements to provide richer user-experience.
See also http://bugs.webkit.org/show_bug.cgi?id=15793
Created attachment 112157 [details]
image for test case
Created attachment 112158 [details]
This testcase works in gecko and presto engines. Untested in trident (IE9+ required)
Created attachment 112159 [details]
area:hover testcase (CSS for img:target and area:hover merged)