W3C home > Mailing lists > Public > whatwg@whatwg.org > March 2015

[whatwg] Responsive image maps

From: Andrea Rendine <master.skywalker.88@gmail.com>
Date: Wed, 18 Mar 2015 12:38:36 +0100
Message-ID: <CAGxST9k4frs2pUDrNcH3eZSv0e66XKkU6o4p5whadZJW89oq-Q@mail.gmail.com>
To: whatwg@whatwg.org
Hi everybody. I know that my idea can be seen as weird but I prefer to try
and receive negative answers, than remaining with nothing.
Today embedding images in a page is more complex than before and it allows
responsive pictures, too. But there's a feature associated with images and,
though still existing (I hope it isn't only for legacy reasons), it has
remained quite archaic. I'm referring to <map> client-side image maps.
I guess that implementation of <map> is not wide enough (at all?), but in
the age of responsive design and varying screen sizes, they will be soon
extinct because a fixed image map is simply useless.

Now, I don't want to discuss rendering issues (it's not true. I wish I
could), but rather another simple question: why can't map area coordinates
be responsive? I know that percentages simply don't work as UAs either
interpret them as pixel, or they aren't interpreted at all. But what about
rescaling?

Imagine something like this (it's a simple example with also an idea for
legacy compatibility):
<map id="mapname" name="mapname" sizes="400x300">
<area type="circle" coords="50,60,40" />
<area type="rect" coords="0,200,400,300" />
</map>
The @sizes attribute indicates the base dimensions for map rescaling.
Lacking it, the map is not resized (so to preserve legacy maps. "Polyfill"
resizing scripts could detect UAs which implement it and let them do it
automatically).
When the map is applied to an image, 2 values "horizontal_ratio"
(CSS-img-width / map-width) and "vertical_ratio" (CSS-img-height /
map-height) are calculated (I guess they should be 2 because CSS can be
improperly used to "stretch" the image). Then coordinates can then be
adjusted according to proper (hor/ver) ratio. (of course in case of
stretching circles should be turned into ellipses where major_axis= 2 *
radius * horizontal_ratio, minor_axis = 2 * radius * vertical_ratio, I
don't think such a transformation is difficult for modern UAs).

Image maps are a powerful tool that allows to define active regions in an
image. The huge difference from old server-side maps is that <map> is
active on the user agent, and as such it allows more inter-activity. It's
way easier than specifying something similar in <canvas> elements, IMO, and
it is native technology (authors have resorted to use Flash stuff because
it had better rendering without any real improvement for interactivity).
But authors prefer relying on layer overlapping. Which is sad because it
makes basically the same as <area type="rect">, in a custom way.  Every
time I see something like that, I compare it to 2-column pages made with
tables.

I know that a major objection could be that <map> elements have been out of
favor even before "responsive" design became a focus, but I think it
depends on the lack of any relationshipt between maps and rendering layer.
Is there any chance that such tool is improved?
Received on Wednesday, 18 March 2015 11:39:02 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:29 UTC