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

Question

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

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

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

Мои вопросы, в резюме:

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

Большое спасибо за то, что вытягивали волосы за все выходные!

Answer 1

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

В этом случае, единственное, что я могу видеть, выглядит следующим образом:

Есть формы с использованием процентов обозначения:

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

На первом розыгрыше и на каждом окне изменения размера:

• проанализировать каждую область mycoords объекта

• Split процентов в четыре целые

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

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

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

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

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

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

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

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

Answer 2

Это немного ограничено, но вы можете делать неправильные фигуры с помощью HTML/CSS.

A List Apart

CSS Play

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

EDIT:

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

На самом деле, существует гибкая структура, которая может уже заботиться о гораздо из этого для вас: Check out CSS Grid.

Answer 3

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