Какие есть способы сделать кликабельные участки на картинке?

Question

[kn1ght_t]

буду открывать вслывашки с подробной информацией при клике на участок плана

как это можно реализовать?
слышал про <map> и <area>, но может есть лучше варианты для этого?

Comments

[Максим Тимофеев]

"слышал про и" - это что?

[copal]

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

[OVK2015]

Посмотрите на
www.outsharked.com/imagemapster
или
jqvmap.com/#europe

Answer 1

[GreatRash]

Всё зависит в первую очередь от того какие браузеры вам надо поддерживать. Если только современные, то однозначно SVG. Правда я не понимаю почему в реализации, предложенной Максим Тимофеев используется какой-то гемор с <object> ибо ничто не мешает вставить <svg> внутрь HTML напрямую.

Вам даже карту отрисовывать в векторе не надо, ибо можно вставить картинку внутрь SVG, а затем поверх накладывать прозрачные полигоны, которые подсвечивать при наведении.

codepen.io/GreatRash/pen/PZgrVX

Comments

[kn1ght_t]

пока такую фигню сделал костыльную (пока координаты только для левого верхнего и правого верхнего углов) https://jsfiddle.net/8Lx08hg4/3/ попробую ваш вариант тоже

[Максим Тимофеев]

object, для браузеров, которые не особо дружат с svg, вот https://habrahabr.ru/post/159947/

Answer 2

[Максим Тимофеев]

Мне нравится такая реализация: habrahabr.ru/post/127994

Comments

[kn1ght_t]

У меня исходник в фотошопе, как мне свг сделать? ни разу с свг не работал )
мб есть какие-то генераторы свг или это рисовать надо с нуля?

[Максим Тимофеев]

Можно в adobe illustrator сохранить как svg

[Максим Тимофеев]

kn1ght_t: Есть и другие редакторы svg

Answer 3

[Дмитрий]

нарезать картинок и сверстать все это

Comments

[kn1ght_t]

спасибо, насмешили