Как сделать :hover filter: brightness(130%); на какой-то объект в картинке?

[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, или еще как-то проще сделать?

Спасибо!

[рони]

Was-Ja,
map css hover
https://codepen.io/solipsistacp/pen/Cbdeg

[Was-Ja]

Спасибо, рони!!!
Именно то, что и хотел!!!

[Was-Ja]

Пожалуйста, можно задать вопрос вдогонку на ту же тему.

Сделал по аналогии примера у себя ( https://www.elegant-nmr.com/mdb.html?r ) . Все вроде классyо получается, но есть один нюанс.

Если мышкой быстро по фрейму елозить, попадая из одной зоны в другую, то происходит эффект мигания экрана. Пытался добавить transition-property: all; transition-duration: 4.0s; в свойства всего, что связано с этой отрисовкой, но, не помогло.

Скажите, пожалуйста, можно ли как-то по-другому замедлить, чтобы не было эффекта моргания экрана?

Спасибо!

[рони]

Was-Ja,
паузу добавьте -- либо во всё transition-delay: .7s- либо только в hover transition-delay: .7s- либо только в изначальное transition-delay: .7s hover transition-delay: 0s
1 вариант
.класс{transition-delay: .7s};
2 вариант
.класс:hover{transition-delay: .7s};
3 вариант
.класс{transition-delay: .7s};
.класс:hover{transition-delay: 0s};

[Was-Ja]

Спасибо большое, рони, за ответ!

Не понимаю, что я делаю не так, перепробовал уйму комбинаций, но задержка не возникает.

Минималистический вариант положил на https://www.elegant-nmr.com/k.html он дополнительно хочет сами картинки, которые в base64 лежат воткнутые в https://www.elegant-nmr.com/b.js больше этот пример ни от чего не зависит.

В примере все стили, связанные с отрисовкой картинки, называются #mif_*.

svg и figure генеряться на прямую в начале JS функции MainInitFrame_Init

В стилях я убрал -webkit-clip-path: - вроде на большинстве современных браузеров и без него работает, а воткнуть в стиль эту опцию получается очень не тривиально.

Пробовал все возможные комбинации transition, transition-delay, transition-property но почему-то ничего не помогает.

Скажите, пожалуйста, может какой-то специальный -webkit надо поставить?

Спасибо!!!

[рони]

Was-Ja,
моя ошибка, тут работа фильтра, transition тут никакого отношения не имеет. возможно есть решение, но нужен специалист по css.

[рони]

Was-Ja,
на всякий случай ...
https://javascript.ru/forum/dom-wind...tml#post443459

[Was-Ja]

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