Главная » Дизайн » Лучший способ сделать так, чтобы картинка менялась при наведении
css спрайт

Лучший способ сделать так, чтобы картинка менялась при наведении

Приветствую Вас на блоге history-of-blog.ru. Эта статья посвящена теме CSS спрайтов, благодаря которым можно добиться классных эффектов в дизайне, при этом не перегружая блог. Наверняка многие блоггеры, когда что-то правили в шаблоне задавались вопросом: а как сделать так, чтобы изображение увеличивалось или менялось при наведении курсора? В этой статье мы ответим на этот вопрос.css спрайт

Что такое css спрайт?

Спрайт – это прием, в котором несколько изображений объединяют и располагают на одном. Затем, благодаря стилям css указывают какую часть изображения показывать в том или ином случае (например при наведении или клике).

Пример спрайтов:

  • Кнопка Rss  в сайдбаре.
  • Кнопки “Отправить письмо”, “Я в контакте”, “Я в Twitter” в футере.

Вот пример изображения которое я использовал для спрайта в сайдбаре:

Для наглядности именно на примере этой картинки и будет написана данная статья.

Основным плюсом спрайта является то, что мы создаем одно изображение вместо двух, трех, четырех и так далее. Можно хоть все используемые графические элементы шаблона разместить на одной картинке, а благодаря css задать то, что нужно выводить в конкретном месте. В результате это, большое изображение, получается меньше, чем много маленьких, но это не главное. Главное в том, что браузер кэширует только один url адрес картинки, то есть происходит меньше запросов, соответственно повышается скорость загрузки сайта и не наблюдается различных мелких ляпов.

Вот еще один пример картинки спрайта для facebook:facebook спрайт

В качестве визуальных задач, которые выполняет этот эффект являются:

  • Изменение изображения при наведении курсора мыши.
  • Увеличение изображения при наведении.

В моем случае картинка становится более темнее (контрастнее).

Если Вы хотите воспользоваться данным приемом, то ниже будет приведена подробная инструкция, начиная от создания картинки-спрайта в фотошопе и заканчивая прописывание стилей для нее.

Создаем картинку для спрайта в фотошопе

  • Скачиваем изображение.

Мне нужно было создать кнопку, которая ведет на Rss ленту блога: http://feeds.feedburner.com/history-of-blog. Так как иконок Rss довольно много в интернете и можно выбрать такую, которая точно понравится, я решил просто скачать ее. Выбрал вот такую (разрешение 100×100 пикселей):иконка rss

Обратите внимание: фон картинки должен быть прозрачным!

  • Подготавливаем фотошоп.

Открываем картинку в фотошопе:

Если у вас нет линеек по бокам изображения, то включите их:  Просмотр -> Линейки.

  • Увеличиваем изображение в два раза по вертикали.

Вся инструкция на картинке:Увеличиваем изображение

  • Завершаем изображение:

Сохраняем картинку:

Файл -> Сохранить для 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 спрайту мы сделали так, что изображение меняется при наведении курсора как это сделано здесь в сайдбаре.

Комментировать через ВКонтакте:
Отзывов к посту "Лучший способ сделать так, чтобы картинка менялась при наведении" уже 9:
  • Евгений Вергус | 17.10.2012 в 21:41

    Да, это очень интересно, надо применить, но все не так просто, придется поработать, в прочем, как и всегда ;-)

  • Сергей | 18.10.2012 в 15:13

    От спрайтов одни плюсы. Прогрузка быстрее, место экономится, не плодится куча файлов. Небольшие сложности могут возникнуть только на стадии верстки, и то если в карте спрайта много изображений элементов. А так только одни плюсы, я думаю стоит замарачиваться с ними.

    • admin | 18.10.2012 в 15:19

      Да, классный прием. Но всю графическую часть я бы не стал пихать в одну картинку – ведь не все части изображения используются на одной странице.
      Заморачиваться определенно стоит :)

      • Сергей | 18.10.2012 в 15:49

        Да в основном я думаю туда стоит располагать иконки, кнопки.

  • Артём | 02.02.2013 в 12:02

    Огромное спасибо сайту!!!
    Пи..ц как помогли!!! :razz:

  • Крутой прием! Я не знала про спрайты, по инструкции вроде все ясно, только вот направляющие никогда не делала в фотошопе, нужно будет попробовать. Статью в закладки, постараюсь где-нибудь применить.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: