X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-12-08
  • 8545 переглядів

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

Доброго времени суток!
Иногда при создании сайта необходимо организовать ссылку(блок), где при наведении курсором - одно изображение сменяет второе. Чаще всего это осуществляют следующим образом - в 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
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078