Как сделать :hover filter: brightness(130%); на какой-то объект в картинке?
Добрый день,
хочу во весь экран на страничке нарисовать картинку с блок-схемой прибора, но так, что когда юзер водит мышью по элементам или соединениям, то они подсвечиваются, а если нажимает, то появляется подсказка. Также хочу, чтобы это все работало одинаково и на десктопе, и на мобильнике. Часто такое делают на онлайн выставках, там даже когда мышкой на человека за стендом наводишь, от начинает светиться (от счастья) и что-то лепетать о своем продукте. Сходу не нашел, чтобы в сорсы подсмотреть... Понимаю, что можно загрузить картинку в канвас, забиндить в нее 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, или еще как-то проще сделать? Спасибо! |
|
Спасибо, рони!!!
Именно то, что и хотел!!! |
Пожалуйста, можно задать вопрос вдогонку на ту же тему.
Сделал по аналогии примера у себя ( 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}; |
Спасибо большое, рони, за ответ!
Не понимаю, что я делаю не так, перепробовал уйму комбинаций, но задержка не возникает. Минималистический вариант положил на 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. |
|
Спасибо большое, рони,
попробую с подсветкой и фильтрами поиграться, возможно удастся придумать красиво и без мерцания. Возможно надо было исходную картинку на темном фоне сделать. |
| Часовой пояс GMT +3, время: 01:13. |