Я прагну взяти кольорову піктограму (і буде посиланням) і перетворити її в градації сірого, поки користувач не наведе мишу на піктограму (де вона потім забарвить зображення).
Чи можливо це зробити і таким чином, що підтримується IE & Firefox?
Я прагну взяти кольорову піктограму (і буде посиланням) і перетворити її в градації сірого, поки користувач не наведе мишу на піктограму (де вона потім забарвить зображення).
Чи можливо це зробити і таким чином, що підтримується IE & Firefox?
Відповіді:
Існує безліч методів досягнення цього, які я детально розкажу на кількох прикладах нижче.
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
img.grayscale:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
Статтю, пов’язану з цією технікою, ви можете знайти тут .
Для цього підходу потрібні дві копії зображення: одна у відтінках сірого, а інша - у повноколірному. Використовуючи CSS :hover
psuedoselector, ви можете оновити фон вашого елемента, щоб перемикатися між ними:
#yourimage {
background: url(../grayscale-image.png);
}
#yourImage:hover {
background: url(../color-image.png};
}
Цього також можна досягти, використовуючи ефект наведення на основі Javascript, такий як hover()
функція jQuery таким же чином.
Desaturate бібліотека є загальна бібліотека , яка дозволяє легко перемикатися між версією в відтінках сірого і повнокольорові версії даного елемента або зображення.
Відповідь тут: Перетворення зображення у відтінки сірого в HTML / CSS
Вам навіть не потрібно використовувати два зображення, що звучить як біль або бібліотеку для маніпуляцій із зображеннями, ви можете зробити це за допомогою крос-браузерної підтримки (поточні версії) і просто використовувати CSS. Це підхід прогресивного вдосконалення, який повертається до кольорових версій у старих браузерах:
img {
filter: url(filters.svg#grayscale);
/* Firefox 3.5+ */
filter: gray;
/* IE6-9 */
-webkit-filter: grayscale(1);
/* Google Chrome & Safari 6+ */
}
img:hover {
filter: none;
-webkit-filter: none;
}
та filters.svg такий файл:
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
</svg>
Я використовую такий код на http://www.diagnomics.com/
Плавний перехід від чорно-білого до кольорового із збільшувальним ефектом (масштаб)
img.color_flip {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE5+ */
-webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
-webkit-transition: all .5s ease-in-out;
}
img.color_flip:hover {
filter: none;
-webkit-filter: grayscale(0);
-webkit-transform: scale(1.1);
}
Ось демонстрація. Навіть працює в IE7:
http://james.padolsey.com/demos/grayscale/
і
http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/