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

Віталий

11 років ago

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

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

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

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

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

Exit mobile version