CSS-only responsive image map

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.

Example

(Resize the viewport!)

Issues

• The <area> element is not stylable in some browsers:

  • https://bugzilla.mozilla.org/show_bug.cgi?id=616333, https://bugzilla.mozilla.org/show_bug.cgi?id=725921
  • https://bugs.webkit.org/show_bug.cgi?id=110940

• Although the <area> element is stylable in Chrome, there are some issues:

  • Changing the position of <area> elements from the initial coords position using CSS causes 2 clickable areas for each element.
  • Mismatch in the placement of CSS 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.