[Was-Ja]

Добрый день,

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

Также хочу, чтобы это все работало одинаково и на десктопе, и на мобильнике.

Часто такое делают на онлайн выставках, там даже когда мышкой на человека за стендом наводишь, от начинает светиться (от счастья) и что-то лепетать о своем продукте.

Сходу не нашел, чтобы в сорсы подсмотреть...

Понимаю, что можно загрузить картинку в канвас, забиндить в нее pointermove, pointerdown, pointerup, руками считать координаты где я сейчас и потом в зависимости от этого или на zIndex рисовать подсказку, или через

ctx.globalAlpha=.50;
ctx.fillRect(0,0,cw,ch);
ctx.restore();
...
ctx.save();
ctx.beginPath();
ctx.clearRect(300,100,200,100);
ctx.rect(300,100,200,100);
ctx.clip();
ctx.drawImage(img,0,0,cw,ch);
ctx.restore();

подсвечивать, но, как-то совсем не просто получается.

Скажите, пожалуйста, может это можно через CSS, или еще как-то проще сделать?

Спасибо!