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