Как правильно выставить координаты картинки?

Question

[khomaldi]

Есть картинка на сайте с display: block; width: 100%; height: auto;
Как выставить для неё координаты для <area coords="" без использования JS? Ведь при разном разрешении разными будут и height/width.

Comments

[Pavel Kuzyakin]

без использования JS — никак

[khomaldi]

Pavel Kuzyakin, понял. Можете показать JS код для этого?

[Pavel Kuzyakin]

Георгий Хомалдишвили, https://github.com/davidjbradshaw/image-map-resizer

[khomaldi]

Pavel Kuzyakin, воспользовался этим скриптом; очень удобно. Но вот в FireFox он неправильно определяет. Отлично работает в Yandex, Chrome, Opera. Не знаете, в чём может быть проблема?

[Pavel Kuzyakin]

Георгий Хомалдишвили, не знаю, давайте разбираться, что именно не так?

[khomaldi]

Pavel Kuzyakin, вот как я считал координаты: открыл картинку в paint и высчитал координаты. В Yandex, Opera и Chrome всё отлично. А в FireFox происходит смещение областей area. Скриншот как раз из FireFox. (это просто картинка из яндекс карт. на сайте тоже картинка будет, а не виджет). Подсказка выводится рядом с курсором.


А вот скриншот из Yandex с подсветкой area. (FireFox отказался подсвечивать outline даже с !important).

[Pavel Kuzyakin]

Георгий Хомалдишвили, можете выложить код на codepen.io или jsfiddle.net?

[khomaldi]

Pavel Kuzyakin, вот ссылка на архив

Answer 1

[Pavel Kuzyakin]

уберите все лишнее из класса .main_map

.main_map {
    width: 100%;
}

диву, в котором все лежит навесьте класс .mapContainer и верните стили, которые были у .main_map:

.mapContainer {
    margin: 0 auto;
    width: 85%;
    padding-top: 76px;
    border-bottom: 1px solid #aaaaaa;
}

Firefox после этого приходит в норму и все рисует, как нужно.

Comments

[khomaldi]

Большое спасибо! Всё помогло. :)