Image map resizing

Greetings to everybody.
Recently I noticed how much work is needed in order to put navigation
commands in images. This is usually achieved through a transparent layer
with commands "covering" the images.
I know that there is an element I could have used in order to put simple
command on parts of the image: client-side image maps (
http://www.w3.org/html/wg/drafts/html/master/semantics.html#image-map).

But several modern solutions choose to use HTML overlay elements, because
of a simple yet vital problem: *image maps aren't responsive*.

*For historical reasons, the coordinates must be interpreted relative to
the displayed image after any stretching caused by the CSS 'width' and
'height' properties (or, for non-CSS browsers, the image element's width
and height attributes — CSS browsers map those attributes to the
aforementioned CSS properties).*

*NOTE: Browser zoom features and transforms applied using CSS or SVG do not
affect the coordinates.*


This isn't something I can accept easily. HTML today can natively serve
advanced embedded content; on the other hand, CSS resizing/transformations
are the best choice for presentational solutions and responsive/resizable
content. But everything collides with this sort of jurassic oddity.
Coordinates in area elements are absolute and refer to distances and
measures in pixels, computed on the image after resizing (but actually
resize plays no role on them). What if the image is adapted to viewport,
zoomed or resized?

It can't be a matter of lacking interest on the part of authors and/or
vendors: if the element is not usable as it is *today*, then of course
nobody can effectively use it and vendors don't guess too much about an
unused feature. It ends up being a vicious circle. And I'm sure that
vendors had no interest in other features before anybody started to develop
custom alternatives, such as datetime input or advanced interactive
embedded content.

And no, actually I'm not the only one with this issue. Otherwise the
solutions as the ones I will present below wouldn't have been even
conceived (these are just examples):
 http://stackoverflow.com/questions/9117219/jquery-image-map-resizing
 http://github.com/davidjbradshaw/image-map-resizer
 http://github.com/stowball/jQuery-rwdImageMaps
This is not just me becoming mad for marginal stuff. So I came up with some
ideas. But before this message becomes too long, please give me some hints
about how this could be done or why it shouldn't be done.

Thanks,
*AR*

Received on Friday, 6 March 2015 00:04:28 UTC