Bug 15035

Summary:

Image maps do not enable feedback such as mouseover tooltips

Product:

WebKit

Reporter:

Robert Burns <robburns1>

Component:

Images

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Enhancement

CC:

ahmad.saleem792, akeerthi, ap, grahamperrin, sabouhallawa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

523.x (Safari 3)

Hardware:

Mac

OS:

OS X 10.4

Attachments:

Description	Flags
Shows image maps referenced form INPUT and IMG elements with some basic potential CSS	none
Shows how styles might be applied to AREA elements to provide richer user-experience.	none
image for test case	none
area:hover testcase	none
area:hover testcase (CSS for img:target and area:hover merged)	none

Robert Burns

Reported 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.

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
Show Obsolete (2) View All Add attachment proposed patch, testcase, etc.

Robert Burns

Comment 1 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>

Robert Burns

Comment 2 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.

Robert Burns

Comment 3 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.

Graham Perrin

Comment 4 2007-11-10 03:21:06 PST

See also http://bugs.webkit.org/show_bug.cgi?id=15793

bugmenot

Comment 5 2011-10-24 01:07:30 PDT

Created attachment 112157 [details] image for test case

bugmenot

Comment 6 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)

bugmenot

Comment 7 2011-10-24 01:39:01 PDT

Created attachment 112159 [details] area:hover testcase (CSS for img:target and area:hover merged)

Ahmad Saleem

Comment 8 2022-06-10 16:45:27 PDT

I am able to reproduce this bug in Safari 15.5 on macOS 12.4. Chrome Canary 104 and Firefox Nightly 103 behaves same. Is it something related to following in Chrome - https://bugs.chromium.org/p/chromium/issues/detail?id=488886

Radar WebKit Bug Importer

Comment 9 2022-06-17 12:10:17 PDT

<rdar://problem/95405081>

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