HTML фоновое изображение карты

Question

Можно ли создать карту изображения из фонового изображения? Мне бы хотелось, чтобы стороны экрана были кликабельными, и я не вижу способа сделать это без карты.

Answer 1

Вы можете использовать прозрачные фиксированные плавающие <a> теги привязки, подобные этим:

<a style="display: scroll; position: fixed; top: 25px; left: 0px; width: 20px; height: 20px;" href="#"></a>

<a style="display: scroll; position: fixed; top: 25px; right: 0px; width: 20px; height: 20px;" href="#"></a>

Возможно, вы захотите использовать атрибут bottom вместо top для позиционирования тегов относительно нижней части окна.

Answer 2

Вы можете создать изображение с абсолютным позиционированием с помощью следующего CSS, чтобы оно масштабировалось, чтобы соответствовать странице.

img.bg{
     position:absolute;
     z-index:-100;
     top:0;left:0;bottom:0;right:0;
}

, а затем используйте эту библиотеку, чтобы карта масштаба масштабировалась вместе со страницей.

https://github.com/davidjbradshaw/image-map-resizer