Как сверстать такой элемент?

Question

[Webreeba]

Есть такой блок.

Вариантов, как сверстать не так уж и много) Самое банальное, что пришло в голову, сделать бекграундом, а места сделать ссылками. Возможно кто сталкивался с таким?)

Comments

[Ninja Mate]

я бы canvas юзал.

[Nwton]

Ninja Mate: а чем canvas лучше обычного png в данном случае?

[Ninja Mate]

Nwton: адаптивность. и вообще все так далают) элементами нужно я так понимаю управлять onclick onhover ...

Answer 1

[Ninja Mate]

canvas

Comments

[Webreeba]

Возможно есть пример, хотя бы отдаленный?

[Ninja Mate]

Webreeba: а чего вам не гуглится, посмотрите как с канвасом работат, не особо сложно. формы простые у вас, вот пример квадрата) www.w3schools.com/tags/tryit.asp?filename=tryhtml5...

[Ninja Mate]

Артём Петренков: проще наверное, если есть где взять.

[Ninja Mate]

Артём Петренков: в своем опыте, я предпочитаю делать как нужно, как не нужно делать не нужно. если все сразу в canvas или d3js делать, то спокойно можно функции менять, разметку и прочее. что вы сажете на то, что элементу (на мобильном часто нужно) можно задать другуие формы и размеры(не новая картинка) и менять их через переменные в коде?

[Ninja Mate]

Артём Петренков: знаю что можно, я не про адаптивность. представьте насколько это больше работы... я свой выбор сделал где то 5-6 месяцев назад, когда попробовал ВСЕ! доступные способы чертить графики и схемы с json данных. Мой личный вывод, что d3 для графиков, canvas для простых схем и тд. Остальное в топку.

Answer 2

[Nwton]

Варианты:
1) Как вы и предложили - сделать фон обычной картинкой, а зеленые блоки ссылками. Самый оптимальный вариант. Зачем всё усложнять.
2) SVG

Верстать всё изображение дивами уж точно не стоит.

Answer 3

[Илья]

есть тег area, можно им.
htmlbook.ru/html/area

Answer 4

[dom1n1k]

По большому счету, выбор технологии тут определяется тем, в каком виде/формате эти картинки рисует дизайнер.
Если он рисует это в SVG или чем-то другом, что удобно экспортируется в оный - стало быть SVG.
Если он рисует в растре - ваш первый вариант.
То есть суть в том, чтобы потом можно было максимально быстро построиться под корректировки дизайна (а они будут с вероятностью 80-90%).