26 марта 2010 в 10:56
Скажите пожалуйста, каким образом сделать чтобы цветная картинка выводилась черно-белой а при наведении курсора становилась цветной?
Хочется сделать это без предварительной нарезки картинок на цветные и чернобелые.
Комментарии
http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javasc...
попробуйте
Полезно
Спасибо. Интересная задача. Не могу сказать, что мне прямо необходимо знать её решение, но точно полезно
сделал с Pixastic + JQuery.
Pixastic собираем тут: http://www.pixastic.com/lib/download (Core + Desaturate)
В template.php подключаем Pixastic и JQuery:
drupal_add_js( path_to_theme() . '/pixastic.custom.js', 'theme' );
В page.tpl в секцию head добавляем:
$(function(){
$(window).load(function(){
$('div#block-views-brands-block_1 img').attr({onmouseout: "saturate(this);"});
$('div#block-views-brands-block_1 img').each(function(e){
var img2 = Pixastic.process(this, "desaturate");
img2.onmouseover = function() {
Pixastic.revert(this);
}
});
});
});
function saturate(img) {
var img2 = Pixastic.process(img, "desaturate");
img2.onmouseover = function() {
Pixastic.revert(this);
}
}
</script>
Мышь пришла - картинки поцветнели, мышь ушла - картинки обесцветились
FORTIS, спасибо за отличное решение!
пожалуйста
подскажите пожалуйста как на D7 такое реализовать?
imagecache
эм. imagecache встроен в d7 насколько я знаю. и каким образом все это сделать?
Ну для спец эффекта использовать image cache это лишнее, лучше использовать клиентские ресурсы. Чуть позже сегодня напишу как под д7 сделать, в целом почти также
жду с нетерпением
-
при наведении мыши картинка бесцветная и при отведении остается такойже
Может, return false; поможет после вызова функций pixastic
не помогло(
нужно чуть переписать и применить подход с function saturate(img) который я для шестерки использовал, попробуйте пока сами, позже помогу если что, пока нет времени.
я бы судовольствием, но в js 0.
так что надеюсь на Вашу помощь)
ДЛЯ DRUPAL 7
Pixastic собираем тут: http://www.pixastic.com/lib/download (Core + Jquery Plugin + Desaturate)
В template.php подключаем Pixastic:
drupal_add_js(path_to_theme() . '/js/jquery.pixastic.desaturate.js');
drupal_add_js(path_to_theme() . '/js/script.js');
}
В каталоге с темой создаем каталог js и в него кладем собранный
ранее jquery.pixastic.desaturate.js (возможно другое имя файла) и создаем там файл script.js cо следующим содержанием:
$(document).ready(function(){
$('img').mouseover(function() {
$(this).pixastic('desaturate')
.mouseout(function() {
Pixastic.revert(this);
});
});
});
})(jQuery);
Проверил, работает
спасибо
хорошее решение, но вместе с каруселью плохо работает. пустые канвасы получаются на месте картинок.
FORTIS или кто знает, этот код и все остальное применяется сразу ко всем картинкам на сайте?
или его можно например прописать в CSS для определенного изображения??
$('img') - меняйте на свой селектор: #content img и т.п.
ну а теперь могу с чистой совестью сказать, что использовать этот плагин нафиг не нужно, если цель ваша сделать спец.эффект - используйте css3-filters с vendor prefixes
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
не нужно грузить клиентскую часть скриптами ради поддержки старья, даже без спец.эффектов сайт должен быть приятным и удобным, и должен выполнять свои задачи, а не картинки раскрашивать