HTML image maps with non-pixel, relative units (em, etc.)

Question

I know about HTML image maps

<map name="beachmap">
  <area href="/" shape="poly" coords="17,51,42,35,66,51,66,89,17,89"
    alt="Beach hut" title="Beach hut - where you get changed">
...

The units used, AFAIK, are pixels. I am in a situation where I need to create an image map, but on an image of variable width. Ideally, I'd like to create an image map that uses em, or percentages for area definitions instead of pixels. Is that possible? What are my options?

To be honest, I'm need to have image map functionality on a background which has background-sizing:cover set, so that's even more difficult. But if I could use relative units, or find an easy solution to have an image map for a variable-width image, it would be a great start already!

Not really sure image maps are used anymore. You can basically get the same thing done with an anchor and some css. — Christopher Marshall, Feb 16 '14 at 22:30
@ChristopherMarshall you can't create complex shapes, as you can with area. — 0skar, Feb 16 '14 at 22:37
I need something where I can create complex shapes, or polygons — Rolf, Feb 16 '14 at 22:44

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

Found some similar questions or answers containing useful information ...

Resize image map on window resize

Dynamically resizing Image-maps and images

PS: specifications imply that percents might be used as image map unit, in addition to pixels, but it seems no browser follows that part of the specifications:

http://home.comcast.net/~urbanjost/IMG/semaphore.html

edited May 23 '17 at 12:20

Community

1
1

answered Feb 16 '14 at 22:59

Rolf

5,550
5
41
61

HTML image maps with non-pixel, relative units (em, etc.)

1 Answers1