X
Заказать услугу

Смена картинки при наведении, ролловер-эффект с помощью CSS

Плагины и Шаблоны для Wordpress
  • 2019-05-26
  • 4603 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток!
Иногда при создании сайта необходимо организовать ссылку(блок), где при наведении курсором - одно изображение сменяет второе. Чаще всего это осуществляют следующим образом - в CSS для блока прописывают фоном одну картинку, а потом задают свойству hover - другую картинку. Выглядит это следующим образом:
html код самой ссылки(блока с картинкой)

<a href="#" id="rover"></a>

и стили CSS для нее

no image
a#rover{
	width:100px;
	height:100px;
	background-image:url(leaf1.png);
	display:block;
	text-decoration:none;
	}
a#rover:hover{
	background-image:url(leaf2.png);
	}

Такой способ встречается очень часто, но у него есть маленький недостаток. Когда страница загружается, то грузится одна картинка, а когда вы наводите курсором на ссылку(блок) начинает грузится следующая картинка и чем больше ее размер, тем дольше это происходит. Выглядит это примерно так, после наведения картинка исчезает, а через секунду появляется новая. Потом это происходит мгновенно, но первый раз , небольшая задержка. Многим это не нравится, даже раздражает 🙂
Поэтому предлагаю способ №2.
Его идея заключается в использовании одной картинки, вместо двух. Мы просто показываем только одну часть картинки, а после наведения вторую. Называют данный способ - ролловер(rollover) и он имеет свои преимущества:

  • Одна картинка грузится быстрее, чем две (один запрос к серверу, а не два)
  • Одна картинка обычно меньше весит, чем две.
  • Ничего не нужно подгружать: всё грузится сразу.
  • Не забивается кеш браузера

В стилях css это выглядит так:

a#rover{
	width:100px;
	height:100px;
	background: url(leafs.png);
	display:block;
	text-decoration:none;
	}
a#rover:hover{
	background-position: 100px 0;
	}

В стилях видно, что наша ссылка(блок) имеет размер 100 на 100 пикселей. В то время картинка имеет размер 200 на 100 пикселей. По умолчанию css прижимает картинку к верхнему левому углу, поэтому в свойстве :hover мы задаем позицию и сдвигаем нашу картинку на 100 пикселей, тем самым показывая ее вторую часть. Результат - смена без задержки.

На этом все. Спасибо за внимание 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.