Почему не адаптируется area map html?
Есть такая библиотека
https://www.npmjs.com/package/img-map-area
Да и собственно другие тоже пробовал
Всё работает отлично, но если только менять экран, изначально
когда страница грузится то в html есть координаты исходного изображения
<map name="location_1"> <area target="" alt="Первый элемент" title="Первый элемент" href="javascript:void(0);" coords="980,527,837,514,795,492,756,476,672,476,651,479,653,270,1157,147,1159,359,1104,349,980,368" shape="poly"> <area target="" alt="Второй элемент" title="Второй элемент" href="javascript:void(0);" coords="973,623,975,611,980,606,981,365,1109,348,1205,371,1205,624,1109,647" shape="poly"> <area target="" alt="Третий элемент" title="Третий элемент" href="javascript:void(0);" coords="598,703,603,687,608,674,613,660,622,647,634,636,643,650,653,669,662,669,674,674,677,687,684,688,696,682,703,675,717,668,737,655,751,633,775,623,820,641,846,657,866,680,904,681,924,694,947,707,961,727,932,732,885,732,824,731,784,738,641,727,615,717" shape="poly"> </map> |
<map name="location_1"> <area target="" alt="Первый элемент" title="Первый элемент" href="javascript:void(0);" coords="980,527,837,514,795,492,756,476,672,476,651,479,653,270,1157,147,1159,359,1104,349,980,368" shape="poly"> <area target="" alt="Второй элемент" title="Второй элемент" href="javascript:void(0);" coords="973,623,975,611,980,606,981,365,1109,348,1205,371,1205,624,1109,647" shape="poly"> <area target="" alt="Третий элемент" title="Третий элемент" href="javascript:void(0);" coords="598,703,603,687,608,674,613,660,622,647,634,636,643,650,653,669,662,669,674,674,677,687,684,688,696,682,703,675,717,668,737,655,751,633,775,623,820,641,846,657,866,680,904,681,924,694,947,707,961,727,932,732,885,732,824,731,784,738,641,727,615,717" shape="poly"> </map>
Но плагин проставялет все нули
и чтоб адаптировать , нужно зайти в инспектор и подвигать экран.
Картинка ж на разных разрешениях разная, и поэтому хотелось бы чтоб он подстраивался под текущую картинку.
Уже перепробовал всё, пока экран не подергаешь, не адаптирует.
window.addEventListener('load', () => { const elements = document.querySelectorAll('.map-area-img') const resizeHandler = () => { elements.forEach((imgEl) => { responsiveImgMapArea(imgEl) }) } resizeHandler() window.addEventListener('resize', resizeHandler) }) |
window.addEventListener('load', () => { const elements = document.querySelectorAll('.map-area-img') const resizeHandler = () => { elements.forEach((imgEl) => { responsiveImgMapArea(imgEl) }) } resizeHandler() window.addEventListener('resize', resizeHandler) })
Дополнительно:
То есть по сути всё отлично работает, но для этого нужно изменить размер экрана в любую сторону. Как можно инициировать чтоб при загрузке страницы сразу адаптивные координаты вставали
В общем взял в итоге решение
https://www.npmjs.com/package/image-map
У меня была проблема что изначально изображения скрывались под display:none;
Поэтому я вызывал
ImageMap('img[usemap]')
Только когда изображения появлялись. Работает.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы корректно адаптировать area map в HTML, необходимо учитывать несколько важных моментов.
1. Используйте относительные размеры для координат областей внутри карты. Вместо того чтобы указывать абсолютные значения (например, "100,50,200,100"), лучше использовать проценты или относительные значения (например, "10%,20%,20%,10%"). Это позволит элементу area map адаптироваться к изменениям размера окна браузера.
2. Проверьте правильность указания ссылок на изображения внутри area map. Убедитесь, что пути к изображениям указаны правильно и доступны по указанному пути.
3. Проверьте правильность указания координат и формы областей внутри area map. Убедитесь, что все координаты правильно указаны и соответствуют форме и размеру области.
Пример использования area map с адаптивными значениями координат в HTML с использованием языка программирования PHP:
<img src="example.jpg" alt="Example" usemap="#exampleMap"> <map name="exampleMap"> <area shape="rect" coords="10%,20%,20%,10%" href="page1.html" alt="Page 1"> <area shape="circle" coords="50%,50%,10%" href="page2.html" alt="Page 2"> <area shape="poly" coords="30%,70%,40%,60%,50%,70%" href="page3.html" alt="Page 3"> </map>
Следуя этим рекомендациям, вы сможете корректно адаптировать area map в HTML и обеспечить правильное отображение областей на изображении независимо от размера экрана пользователя.