0

Я хочу, что-бы фото были, как-бы черно-белим, а когда наводишь на них, они становились нормальными. Как это осуществить? только не opacity у фото и background: black, так оно будет темным, но цвета будут видны

Короче мне надо сделать фото черно-белым

4 ответа 4

3

Можно просто поверх фото динамически строить черный объект "div" с прозрачностью 0.4 - 0.6. И затем обрабатывать у него событие "onmouseover()" на удаление объекта.

2
  • Ну уж тогда не строить, а показывать/прятать. 3 мар 2012 в 12:11
  • Ну это уже как вам угодно =)
    – AseN
    3 мар 2012 в 12:46
2

Как я понимаю изображение не чёрно-белое, а в градациях серого? Тогда вам нужен фильтр Gray()

<DIV ID="GrayId" STYLE="width:320; height:240;
    filter:Gray()">
<IMG src="image.jpg" WIDTH="320" HEIGHT="240"></DIV>

P.S. Ну, и, разумеется, использовать события DHTML (onMouseOver и onMouseOut).

3
  • ННо работать будет только в старом-добром IE в других браузерах это нереально :) 3 мар 2012 в 12:10
  • Лучше не пытаться пользоваться некроссбраузерными методами.
    – AseN
    3 мар 2012 в 12:51
  • Можете предложить другой (кроссбраузерный) способ замены цвета, а не затемнения? 3 мар 2012 в 19:03
2

Судя по тегам, вам надо только средствами html+css. Тогда самый простой способ:

HTML

<div class="grey_color"></div>

CSS

.grey_color {
    width: 100px; /* размеры свои */
    height: 100px;
    background: url(путь_к_чернобелой_картинке/grey.jpg) 0 0 no-repeat;
}
.grey_color:hover {
    background: url(путь_к_цветной_картинке/color.jpg) 0 0 no-repeat;
}
2
  • да нет, без двойных картинок, вроде бы через SVG можно?
    – ZoZexZero
    3 мар 2012 в 11:53
  • @ZoZexZero, для SVG и картинки должны быть SVG. 3 мар 2012 в 12:12
0

Наверняка HTML 5 canvas такое можно реализовать, ну а вообще я бы на серваке делал вторую копию в чб цветах ...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.