Bug 15035 - Image maps do not enable feedback such as mouseover tooltips
: Image maps do not enable feedback such as mouseover tooltips
Status: UNCONFIRMED
: WebKit
Images
: 523.x (Safari 3)
: Macintosh Mac OS X 10.4
: P2 Enhancement
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2007-08-21 00:54 PST by
Modified: 2011-10-25 14:23 PST (History)


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 PST, 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 PST, Robert Burns
no flags Details
image for test case (134.80 KB, image/jpeg)
2011-10-24 01:07 PST, bugmenot@mailinator.com
no flags Details
area:hover testcase (3.70 KB, text/html)
2011-10-24 01:12 PST, bugmenot@mailinator.com
no flags Details
area:hover testcase (CSS for img:target and area:hover merged) (3.07 KB, text/html)
2011-10-24 01:39 PST, bugmenot@mailinator.com
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2007-08-21 00:54:06 PST
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 From 2007-08-21 01:04:39 PST -------
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 From 2007-08-21 01:35:57 PST -------
Created an attachment (id=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 From 2007-08-21 04:28:47 PST -------
Created an attachment (id=16051) [details]
Shows how styles might be applied to AREA elements to provide richer user-experience.
------- Comment #4 From 2007-11-10 03:21:06 PST -------
See also http://bugs.webkit.org/show_bug.cgi?id=15793
------- Comment #5 From 2011-10-24 01:07:30 PST -------
Created an attachment (id=112157) [details]
image for test case
------- Comment #6 From 2011-10-24 01:12:14 PST -------
Created an attachment (id=112158) [details]
area:hover testcase

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