bootd
@bootd
Гугли и ты откроешь врата знаний!

Как лучше всего выделять области на изображении по типу area?

У меня есть картинка, на ней есть здание и при наведении на отдельный этаж, мне нужно его подсветить. Подсветка - это отдельный кусочек этого этажа, который просто накладывается на при помощи позиционирования. Но проблема в том, что этажи не ровные, на картинке здание как бы в профиль.

Думал в сторону svg, но у наших дизайнеров нет возможности перерисовать подсвеченные области, т.к. не знают svg и нет иллюстратора для его изучения! Я попробовал сам эти картинки перевести их в svg, но получил не то что хотел, как я и думал. Код в svg был не тем, что нужен! В теге была закодирована моя картинка!

map с его area для меня оказался очень сложным, но как я не пытался сделать, браузер не хочет выделять мне тег area, если я наведу на ноду в консоли, что очень осложнило отладку.
  • Вопрос задан
  • 1723 просмотра
Пригласить эксперта
Ответы на вопрос 3
andykov
@andykov
Shit happens
Когда не знал как работать с SVG, для подобной задачи использовал этот ресурс. Загружаете изображение и поверх него чертите области этажей. В итоге получаете сгенерированный код map area.

Но такие вещи лучше делать через SVG.
Для SVG есть онлайн редактор . Поступаете аналогичным способом, загружаете изображение, создаете новый слой и на нем чертите области. Правда лично не пользовался.

Проще конечно это делать в илюстраторе.
Ответ написан
Комментировать
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Зачем нужен Illustrator??? Для изучения SVG достаточно простого текстового редактора, браузера, справочника и спецификации.
На крайний случай есть Inskape.
Можно посмотреть заметки и полезные ссылки на сайте Юлии Бухваловой.
Что же касается наклона — можно трансформировать как весь полученный плоский SVG, так и фигуры внутри него.

А с area у вас ничего не выйдет.
Ответ написан
Комментировать
Я бы перекрыл изображение прозрачным канвасом и закрашивал бы на нем области :)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы