Re: [whatwg] Responsive image maps

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