Показано с 1 по 5 из 5

Тема: Как сделать, чтобы черно-белая картинка при наведении становиться цветной?

  1. #1
    Подскажите, пожалуйста, как сделать, чтобы черно-белая картинка при наведении становиться цветной?

    Допустим, есть цветная картинка ссылка

    [Только зарегистрированные пользователи могут видеть ссылки. ]

    [Только зарегистрированные пользователи могут видеть ссылки. ]


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

    [Только зарегистрированные пользователи могут видеть ссылки. ]




    Можно ли это сделать при помощи CSS?

  2. #2

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Можно ли это сделать при помощи CSS?
    Не можно, а нужно. Поэтому объедините обе Ваши картинки (черно-белую и цветную) в одно общее изображение, ликвидируйте элемент <img>, задайте полученную картинку фоновым изображением для элемента <a>...</a> и меняйте ее позицию (CSS-свойство background-position) при получении элементом <a>...</a> динамического псевдокласса :hover.

  3. #3
    Не можно, а нужно. Поэтому объедините обе Ваши картинки (черно-белую и цветную) в одно общее изображение, ликвидируйте элемент <img>, задайте полученную картинку фоновым изображением для элемента <a>...</a> и меняйте ее позицию (CSS-свойство background-position) при получении элементом <a>...</a> динамического псевдокласса :hover.
    Спасибо, что ответили)
    не совсем понятно, а можете кодом показать?

  4. #4

    Регистрация
    15.11.2006
    Адрес
    Тольятти
    Сообщений
    2,698
    Код:
    [Только зарегистрированные пользователи могут видеть ссылки. ]
    Код:
    a {text-indent: -9000px; background: url(img.jpg) no-repeat; display: block; width: 315px; height: 189px; overflow: hidden;}
    a:hover {background-position: 0px -189px;}

  5. #5

    Регистрация
    05.08.2009
    Адрес
    Москва
    Сообщений
    20
    задайте полученную картинку фоновым изображением для элемента <a>...</a> и меняйте ее позицию при получении элементом <a>...</a> динамического псевдокласса :hover.
    Какая простая и светлая идея! Спасибо, буду пользоваться! ^^

Похожие темы

  1. Что сделать чтобы победить.
    от the end в разделе Флейм
    Ответов: 15
    Последнее сообщение: 21.11.2007, 13:09
  2. Как сделать анимацию при наведении мыши?
    от mamba в разделе Flash-технологии
    Ответов: 2
    Последнее сообщение: 20.02.2007, 11:29
  3. Как сделать черно-прозрачный фон?
    от Глаша в разделе Вёрстка сайта
    Ответов: 3
    Последнее сообщение: 03.01.2007, 01:55
  4. Как сделать чтобы не разъезжалось?
    от mumus в разделе Вёрстка сайта
    Ответов: 18
    Последнее сообщение: 08.10.2005, 16:17
  5. Как сделать чтобы при наведении на банер
    от Risoz в разделе Flash-технологии
    Ответов: 1
    Последнее сообщение: 19.01.2005, 06:19

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •