Есть ли скрипт по моментальному превращению сайта в ч/б?

Question

[NAIs]

Вот есть у вас сайт. Красочный. И чтобы показать посетителям, что они теряют, если убрать все краски с сайта, нужна кнопка, переключающая без перезагрузки всю страницу в ч/б. Это вообще реализуемо? При условии динамических картинок, шрифтов и фонов в css, и много другого.

Answer 1

[Александр Белугин]

Фильтр в IE: msdn.microsoft.com/en-us/library/ms532972(v=vs.85).aspx

Можно применить ко всей странице с grayscale=1. Понятно, что не подходит как универсльное решение, но ИЕ5.5 это умел. :)

Comments

[NAIs]

вот-вот! Такое бы в студию и для всех браузеров. :) Честно, такие возможности у IE увидел впервые

[Александр Белугин]

Подумал, что можно как-то так:
1. Динамически заменить css активный — это понятно. Css-картинки заменять тут же (в оформлении они, наверное, статические всё же).
2. Пройтись циклом по картинкам и заменить src, скажем, /img/1.png на /recolor.php?img=1.png, который возвращает ч\б изображение. Можно подгружать эти картинки при загрузке страницы.

[XaBoK]

Можно попытаться использовать cvi_filter_lib.js для фильтра grayscale в других браузерах…

[XaBoK]

В Лисе есть возможность использовать фильтры SVG, не знаю как дела с Хромом и Сафари…

Answer 2

[kefirr]

Простого решения не вижу. Нужно пробегаться по всему DOM дереву и делать как-то ч/б.

Картинки можно превратить в ч/б при помощи canvas, других способов делать «на лету» не знаю.
Ну а остальные элементы — средствами CSS, или вроде того, тут уже проще должно быть.
И как-то надо запоминать состояние элементов, чтобы потом вернуть обратно всё.

Comments

[NAIs]

Да… Этот вариант — единственный, что пришел мне в голову. Но он так заморочен…
Если ничего другого не останется, придётся делать его.

Answer 3

[Макс Кузнецов]

В долгосрочной перспективе может помочь следующее — при заливке на сайт новых фотографий, сохранять также и её черно-белую копию. И при запросе пользователя, выдавать слегка изменённый css: для текста правила сразу написать, а для картинок — менять, например, background: url('images/back.png'); на background: url('images/back-gray.png'), где back-gray.png та самая чёрно-белая копия.

Answer 4

[pxx]

Честно говоря, не могу представить, какую цель преследует данная задача.