Как картинку канвасом разбить по частям и каждая часть была кликабельна?
Есть такая картинка, как сделать кликабельной и навешать на неё метод на каждую планировку? Нужно чтобы был какой-то эффект при наведении/клике на эту область (например рамка подсвечивалась).
Подскажите, с канвасом ранее не работал, не понимаю как это делается. На примере одной планировки(например, верхней левой желтой) покажите, пожалуйста.
обратите внимание, что предложенное решение будет работать только для тэгов area с атрибутом shape="poly", для других типов потребуется доработка. Ну и само собой, рамки придется выровнять.
Athanor, решение в этом направлении мне очень нравится) правда пока не понял как это всё работает) А как управлять рамкой? мне надо ее сделать шире и сделать ей размытие какое-нибудь.
danilr, рамка рисуется согласно координатам, которые указываются атрибутом к тегам area. Т.е. при наведении на area мы достаем ее координаты, парсим и отображаем на канвасе. За это отвечает функция drawPolygon. Если хотите сам стиль рамки поменять, вам в функцию applyStylesForCanvas, я там для примера поменял цвет stroke. Можно почитать по теме https://developer.mozilla.org/en-US/docs/Web/API/C...
