Как я могу включить карту изображения в гибкий макет?

Question

У меня сейчас огромная головная боль при попытке создать сайт, который я создаю, для работы с переменным разрешением. Основная навигация осуществляется через карту изображений, которая должна заполнять большую часть области просмотра. Я знаю, что это полностью устарело, но карта изображений кажется единственным не Flash-решением, позволяющим разграничивать полигональные области - хотя я бы люблю альтернативу!

Мне в итоге удалось изменить размер сайта, чтобы основное изображение отображалось на меньших мониторах с помощью условных jQuery и CSS, но это также изменяет размер текста в slickboxes, что выглядит ужасно!

Сайт (очень незаконченный) - здесь . Я знаю, что навигация еще не совсем понятна (наведите курсор мыши и нажмите цвета краски), но сначала я хочу разобраться с этой проблемой.

Мои вопросы, в итоге:

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

Огромное спасибо - все эти выходные выдергивал волосы!

Answer 1

Редактировать: Процентный подход не работает.

В этом случае единственное, что я вижу, выглядит так:

Имеют фигуры с использованием процентной записи:

 <area shape="rect" coords="0,0,0,0" mycoords="1%,3%,25%,29%">

При первом рисовании и в каждом окне изменяйте размер:

• анализируйте свойство mycoords каждой области

• Разделить проценты на четыре целых числа

• Рассчитать проценты на основе свойства .width() изображения

• Установить свойство coords области на основевычисленные таким образом значения пикселей

Не совсем тривиально, но это должно быть наполовину легко осуществимо опытным jQueryist.

Старый ответ:

Хмм.Итак, у вас есть карта изображения, которая должна динамически изменять размер?

Я никогда не пробовал сам, но как насчет использования относительных координат =

 <area shape="rect" coords="1%,3%,25%,29%">

Не знаю, работает ли это, но стоит попробовать.

Answer 2

Это немного ограничено, но вы МОЖЕТЕ делать неправильные формы с HTML / CSS.

Список отдельно

CSS Play

Вы должны быть в состоянии приспособить один из них к вашим целям.

EDIT:

Что касается изменения размера изображения, вам нужно использовать относительную ширину в вашем CSS вместо жесткого кодирования их в пикселях

Фактически, существует гибкая структура, которая может уже позаботиться о многих из вас для вас: Проверьте CSS Grid .

Answer 3

Еще один обходной путь для горячих точек в плавном дизайне - создание адаптивного статического изображения со ссылками в Edge Animate.Горячие точки (или слои, которые действуют как горячие точки) тогда полностью реагируют.Недостатком является то, что при выходе из Edge изображение размером 50 КБ будет иметь размер около 120 КБ.Сказав, что это довольно быстро обойти.