
Лучший способ сделать так, чтобы картинка менялась при наведении
Приветствую Вас на блоге history-of-blog.ru. Эта статья посвящена теме CSS спрайтов, благодаря которым можно добиться классных эффектов в дизайне, при этом не перегружая блог. Наверняка многие блоггеры, когда что-то правили в шаблоне задавались вопросом: а как сделать так, чтобы изображение увеличивалось или менялось при наведении курсора? В этой статье мы ответим на этот вопрос.
Что такое css спрайт?
Спрайт – это прием, в котором несколько изображений объединяют и располагают на одном. Затем, благодаря стилям css указывают какую часть изображения показывать в том или ином случае (например при наведении или клике).
Пример спрайтов:
- Кнопка Rss в сайдбаре.
- Кнопки “Отправить письмо”, “Я в контакте”, “Я в Twitter” в футере.
Вот пример изображения которое я использовал для спрайта в сайдбаре:
Для наглядности именно на примере этой картинки и будет написана данная статья.
Основным плюсом спрайта является то, что мы создаем одно изображение вместо двух, трех, четырех и так далее. Можно хоть все используемые графические элементы шаблона разместить на одной картинке, а благодаря css задать то, что нужно выводить в конкретном месте. В результате это, большое изображение, получается меньше, чем много маленьких, но это не главное. Главное в том, что браузер кэширует только один url адрес картинки, то есть происходит меньше запросов, соответственно повышается скорость загрузки сайта и не наблюдается различных мелких ляпов.
Вот еще один пример картинки спрайта для facebook:
В качестве визуальных задач, которые выполняет этот эффект являются:
- Изменение изображения при наведении курсора мыши.
- Увеличение изображения при наведении.
В моем случае картинка становится более темнее (контрастнее).
Если Вы хотите воспользоваться данным приемом, то ниже будет приведена подробная инструкция, начиная от создания картинки-спрайта в фотошопе и заканчивая прописывание стилей для нее.
Создаем картинку для спрайта в фотошопе
- Скачиваем изображение.
Мне нужно было создать кнопку, которая ведет на Rss ленту блога: http://feeds.feedburner.com/history-of-blog. Так как иконок Rss довольно много в интернете и можно выбрать такую, которая точно понравится, я решил просто скачать ее. Выбрал вот такую (разрешение 100×100 пикселей):
Обратите внимание: фон картинки должен быть прозрачным!
- Подготавливаем фотошоп.
Открываем картинку в фотошопе:
Если у вас нет линеек по бокам изображения, то включите их: Просмотр -> Линейки.
- Увеличиваем изображение в два раза по вертикали.
Вся инструкция на картинке:
- Завершаем изображение:
Сохраняем картинку:
Файл -> Сохранить для Web устройств… Сверху выбираем формат PNG-24 и сохраняем.
Картинка готова!
Создаем картинку, которая меняется при наведении курсора
Выбираем то место место, куда хотим вставить картинку и вставляем туда следующую конструкцию:
<a href="http://feeds.feedburner.com/history-of-blog" target="_blank"> <div class="rss"> </div> </a>
Ссылку вставлять необязательно, если этого не требуется.
Затем открываем файл style.css и в самом конце добавляем:
.rss { width:100px; height:100px; background:url(images/rss.png) no-repeat bottom center; float:left; margin-top:5px; } .rss:hover { background:url(images/rss.png) no-repeat top center; float:left; }
Данные стили используются мной, не факт что именно Вам они подойдут. Все частные случаи разобрать, увы, невозможно.
Дам некоторые пояснения:
- width – ширина картинки.
- height – половина высоты картинки.
- background – фон (url – адрес до картинки), no-repeat – без повторений, bottom center и top center – какую часть изображения выводить – нижнюю или верхнюю (именно в этом фишка спрайта).
- :hover – стиль при наведении.
Вот в принципе и все! Благодаря css спрайту мы сделали так, что изображение меняется при наведении курсора как это сделано здесь в сайдбаре.
Похожие статьи:
-
Сергей | 18.10.2012 в 15:13
От спрайтов одни плюсы. Прогрузка быстрее, место экономится, не плодится куча файлов. Небольшие сложности могут возникнуть только на стадии верстки, и то если в карте спрайта много изображений элементов. А так только одни плюсы, я думаю стоит замарачиваться с ними.
-
Артём | 02.02.2013 в 12:02
Огромное спасибо сайту!!!
Пи..ц как помогли!!!
-
Надежда Ковальская | 12.07.2013 в 10:34
Крутой прием! Я не знала про спрайты, по инструкции вроде все ясно, только вот направляющие никогда не делала в фотошопе, нужно будет попробовать. Статью в закладки, постараюсь где-нибудь применить.
Да, это очень интересно, надо применить, но все не так просто, придется поработать, в прочем, как и всегда