Эффекты на картинке

Технические моменты создания сайтов и других Web-приложений.

Эффекты на картинке

Сообщение Miheich » 16 авг 2014, 10:41

Приветствую всех!
Ищу решение своей идеи не знаю с чего начать у меня на сайте картинка вот http://pro-motorik.ru/images/vse_sistems.png хочу сделать так чтоб коробочки с товаром были черно-белыми а при наведении становились цветными и были ссылками. Можно ли это сделать html и css или уже что то покруче нужно. Полазил в интернете не могу найти решение все что я понял это как то обернуть дивами каждую картинку с коробочкой или изображение сделать фоном а товар это отдельные картинки вообщем если кто подскажет буду очень признателен.
Аватар пользователя
Miheich
 
Сообщений: 1
Зарегистрирован: 16 авг 2014, 10:05
Откуда: Россия

Re: Эффекты на картинке

Сообщение Antonina » 29 сен 2014, 21:12

Приветствую!
Во-первых необходимо разрезать исходную картинку на прямоугольные части так, чтобы коробочки были в разных частях. Сделать это можно в фотошопе.
Изображение
http://fastpic.ru/view/63/2014/0929/53871ff7711980691164a3cd988f6093.jpg.html

Во-вторых необходимо их сохранить в отдельные файлы, и скорректировать web страницу так, чтобы они отображались как исходная картинка. Рекомендую задействовать слои для этого.

Далее, есть два пути:
1. Создание безцветных копий картинок и использование CSS для накладывания цветной на черно-белую (обработка события hover)
2. Использование JQuery UI совместно с HTML5 (более современно)

Я рекомендую второй способ, так как меньше придется возиться с дизайном, не нужно дополнительно хранить и загружать клиенту черно-белые изображения.
Как это работает можете посмотреть здесь: http://www.jqueryscript.net/demo/Grayscale-Image-Hover-Effect-with-HTML5-jQuery/
Скачать исходник здесь: http://www.jqueryscript.net/download/Grayscale-Image-Hover-Effect-with-HTML5-jQuery.rar

Удачи!
Аватар пользователя
Antonina
Чайник
 
Сообщений: 4
Зарегистрирован: 22 сен 2014, 20:42


Вернуться в Программирование для Web

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron