Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   подсветка картинки. (https://javascript.ru/forum/dom-window/28817-podsvetka-kartinki.html)

l-liava-l 04.06.2012 00:34

подсветка картинки.
 
Доброго времени суток!
Вот хочу сделать логотип для сайта, но что то непойму как.
Вот в чем суть.

картинка - чернобелая.
наводим на нее мышкой и она становиться цветной.
Но не все изображение, а только область возле курсора.

На чем такое можно провернуть?(кроме флеша) подскажите пожалуйста что почитать по этому поводу.


Благодарю всех кто участвовал!
вот и решение собственно.
http://javascript.ru/forum/dom-windo...-reshenie.html

beard 04.06.2012 00:48

l-liava-l, пример в студию

я знаю вариант но он очень муторный

Deff 04.06.2012 00:52

l-liava-l,
Выложите картинку и итоговые скриншоты в ФШ,
Наверно сложность будет в краях пятна, их тяжко сделать плавными

beard 04.06.2012 00:58

о чем я говорил, по примеру этого
http://diyaalo.com/nepalmapapi/

плагин называется maphilight

Можно в логотипе наклепать нужные области, например по буквам и тд.

dmitriymar 04.06.2012 01:08

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

l-liava-l 04.06.2012 01:11

Цитата:

о чем я говорил, по примеру этого
http://diyaalo.com/nepalmapapi/

плагин называется maphilight

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


А чтобы буквы подсветить и лишнего ничего использовать не надо, пишим слово по одной букве в <li></li> задаем стили. а потом отслеживаем наведение на нужную букву и меняем ее стиль.

beard 04.06.2012 01:15

Цитата:

Сообщение от dmitriymar
Положить сверху изображения чернобелого канву с прозрачным цветным изображением.При заходе курсора мыши менять прозрачность пик селам в канве вокруг курсора

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

beard 04.06.2012 01:16

Цитата:

Сообщение от l-liava-l
А чтобы буквы подсветить и лишнего ничего использовать не надо, пишим слово по одной букве в <li></li> задаем стили. а потом отслеживаем наведение на нужную букву и меняем ее стиль.

у тебя все буквы по умолчанию квадратные?

l-liava-l 04.06.2012 01:16

Цитата:

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

l-liava-l 04.06.2012 01:19

Цитата:

у тебя все буквы по умолчанию квадратные?
А причем сдесь квадратные? я же не собираюсь менять внешний вид списка.
берем красивый шрифт, а color font-size и text-shadow делают все остальное.:)


Часовой пояс GMT +3, время: 19:57.