- From: Simon Pieters <simonp@opera.com>
- Date: Tue, 24 Mar 2015 16:08:21 +0100
- To: whatwg@whatwg.org, "Martin Janecke" <whatwg.org@prlbr.com>
- Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Andrea Rendine <master.skywalker.88@gmail.com>
On Fri, 20 Mar 2015 20:22:28 +0100, Martin Janecke <whatwg.org@prlbr.com> wrote: > Am .03.2015, 13:10 Uhr, schrieb Simon Pieters <simonp@opera.com>: > >> Please leave out syntax proposals for now. What I think is needed first >> to drive this forward is: >> >> * Use cases. Why do you need this? > > In general it's needed to allow geometric areas on an image to be > associated with hyperlinks – that's what > https://html.spec.whatwg.org/multipage/embedded-content.html#image-map > says – and to associate areas on an image with tooltips. I've used this > to name objects in a drawing (think of helping children or foreigners > learn words for things displayed in an image). I've also packed small > versions of photographs with different aspect ratios nicely aligned in a > single preview image file and used an image map to link those previews > with bigger sized photographs > (https://prlbr.de/2014/wanderung-wanzer-wittenberge/). I've seen > Wikipedia link objects in photographs and paintings (star > constellations, people) with active image areas. It's also used for site > navigation with fancy design. > > Those are use cases for image maps. Having them work on different screen > sizes, e.g. on smartphones and desktop screens, is the main use case for > making them responsive. Thanks. >> * More examples of pages that work around the lack of this feature. > > Here's a Wordpress plugin actively used on 7000+ sites: > https://wordpress.org/plugins/responsive-image-maps/ In httparchive I see 92 out of ~130,000 pages using jquery.rwdImageMaps.min.js or imageMapResizer.min.js. SELECT page, COUNT(*) as num FROM [httparchive:runs.2014_08_15_requests_body] WHERE REGEXP_MATCH(body, r'(jquery\.rwdImageMaps\.min\.js|imageMapResizer\.min\.js)') GROUP BY page ORDER BY num desc; Of those 92, 17 use variable-size image map: http://www.shitlicious.com/ http://www.1stonlinesolutions.com/ http://www.audio-technica.com/world_map/ http://www.apartmentratings.com/ http://www.unoriginalmom.com/ http://www.bonton.fr/en_4/ https://www.electricobjects.com/ http://www.zeitzuleben.de/ https://www.konami.com/ https://www.ncjrs.gov/ http://www.thehybridshop.com/ http://www.brief.pl/ http://www.foodpolitics.com/ http://www.milegi.in/ http://www.sura.com/internacional/default.aspx http://www.mintvelvet.co.uk/ http://www.oldtimecandy.com/ ...and 3 use art direction image map: http://www.wetv.com/ http://www.kidsii.com/ http://www.hbs.edu/Pages/default.aspx ...and the rest either don't use <map> at all or use a fixed-width image map. > Recently I've modified my personal website to be mobile-friendly – > except for all the pages that use image maps with differently shaped > active areas, because I didn't have a nice solution for these. That's > not an example for a work-around of course, but an example for demand > for such a feature. > > Here's a bunch of stackoverflow questions showing more demand: > http://stackoverflow.com/questions/1563299/recalculate-image-map-after-window-resize > http://stackoverflow.com/questions/7844399/responsive-image-map > http://stackoverflow.com/questions/7943003/dynamically-resizing-image-maps > http://stackoverflow.com/questions/12214373/image-mapping-responsive-design > http://stackoverflow.com/questions/13321067/dynamically-resizing-image-maps-and-images > http://stackoverflow.com/questions/20058971/dynamically-resizing-image-maps-and-images-maphilight-min-js > http://stackoverflow.com/questions/23752408/resizing-image-maps-containing-circles > http://stackoverflow.com/questions/25806090/how-to-detect-and-change-polygon-shape-co-ordinates-in-image-to-be-responsive > http://stackoverflow.com/questions/26298771/how-would-i-create-a-dynamic-hit-zone-that-changes-when-resizing-or-moving-the > http://stackoverflow.com/questions/26552283/html-image-map-areas-responsiveness These all appear to want to use variable-size image maps. >> * Why are alternatives like CSS-positioned <a> links […] not better? > > Unlike <a> elements, <area>s in an image map can be shaped as a circle > or as an author-defined polygon. That's essential when describing parts > of certain images. I was going to say that CSS shapes allows other shapes, but apparently it doesn't affect hit testing. >> * Why are alternatives like […] SVG not better? > > I didn't know SVG could be used for this. This is new to me, so I'm not > sure yet, but it looks quite good. Should the outcome of this discussion > be that SVG is good enough to solve all use cases and that image maps > are not enhanced, I'd suggest adding a hint to SVGs as a note in the > image map section of the HTML spec. Yeah, we could do that in any case. > However, since image maps have been an integral part of HTML since > version 3.2 and not been deprecated in favor of a better alternative > yet, it might still be a straightforward solution to enhance them. > Responsive image maps would be backwards compatible to all non-graphical > clients that support at least HTML 3.2 such as Lynx, various bots and > presumably most screen readers. Accessibility is already solved for > image maps. > > What are the accessibility implications of using SVGs? In an image map, > an <area> element used as a link must have an @alt attribute providing a > link text. It seems that an SVG could use the <desc> element for that > purpose, but it isn't mandatory. Is it understood as link text by screen > readers? In case it isn't: do screen reader vendors plan to parse SVGs > and make (links in) them accessible in the future? What about search > engines? Do/will they handle hyperlinks in SVGs like <a> and <area> > hyperlinks in HTML? I think there are both pros and cons with SVG. + Can use more shapes. + Can use more accurate coordinate points. + Can use hover effects without JS. - Clunky markup, e.g. if you want to use <img srcset> in <svg> you have to use <foreignObject>. * * * It seems to me that there are two use cases: 1. variable-size image map 2. art direction image map (1) is more common than (2). It is possible to address these today but not without problems: JS: doesn't work if JS doesn't run, and the hit areas lag behind resizing. CSS: Can only do rectangular shapes for hit testing. SVG: Seems annoying to work with compared to <map>. If there is implementor interest, I think it makes sense to make <map> address use case (1) first, and after that maybe also use case (2). Is there? :-) (Related issue: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28148 ) -- Simon Pieters Opera Software
Received on Tuesday, 24 March 2015 15:08:59 UTC