This is an attempt to achieve responsiveness in image
maps using CSS; specifically using:
height
,
width
and
clip-path
to set the <area>
element's dimensions and shape, and the top
and left
properties to set positioning relative to the parent <map>
element.
(Resize the viewport!)
<area>
element is not stylable in some browsers:
<area>
element is stylable in Chrome, there are some issues:
<area>
elements from the initial coords
position using CSS
causes 2 clickable areas for each element.
outline
and corresponding <area>
elements
(i.e. outlines are displayed in regards to the coords
attribute values, not the absolutely positioned area elements.)
See https://bugs.chromium.org/p/chromium/issues/detail?id=1127711.