Мне нужно создать элементы <map> и <area> на веб-странице, содержащей много изображений. Каждое изображение должно быть связано с соответствующими <map> через usemap="#map1", usemap="#map2" и т. Д. *
В качестве неприятного хака для этой ситуации я хотел бы добавить один абсолютно позиционированный 1x1 (top: 0, left: 0) <img> ( anchor-image ). Затем я бы объединил все теги <area> в одну <map> (суперкарту ), на которую ссылается anchor-image .
В этом случае теги <area>, определенные в суперкарте , не активируются при наведении на них курсора мыши (они находятся за пределами 1x1 anchor-image ). Я попытался сделать anchor-image width: 100%, height: 100% и поиграть с его z-индексом (мне все еще приходится взаимодействовать с изображениями на странице по другим причинам). К сожалению, когда z-index делает элементы <area> кликабельными, я не могу взаимодействовать с изображениями.
Есть идеи, что еще я могу попробовать? Спасибо!