Доброго времени суток!
Иногда при создании сайта необходимо организовать ссылку(блок), где при наведении курсором - одно изображение сменяет второе. Чаще всего это осуществляют следующим образом - в CSS для блока прописывают фоном одну картинку, а потом задают свойству hover - другую картинку. Выглядит это следующим образом:
html код самой ссылки(блока с картинкой)
и стили CSS для нее
Такой способ встречается очень часто, но у него есть маленький недостаток. Когда страница загружается, то грузится одна картинка, а когда вы наводите курсором на ссылку(блок) начинает грузится следующая картинка и чем больше ее размер, тем дольше это происходит. Выглядит это примерно так, после наведения картинка исчезает, а через секунду появляется новая. Потом это происходит мгновенно, но первый раз. небольшая задержка. Многим это не нравится, даже раздражает 🙂
Поэтому предлагаю способ №2.
Его идея заключается в использовании одной картинки, вместо двух. Мы просто показываем только одну часть картинки, а после наведения вторую. Называют данный способ - ролловер(rollover) и он имеет свои преимущества:
- Одна картинка грузится быстрее, чем две (один запрос к серверу, а не два)
- Одна картинка обычно меньше весит, чем две.
- Ничего не нужно подгружать: всё грузится сразу.
- Не забивается кеш браузера
В стилях видно, что наша ссылка(блок) имеет размер 100 на 100 пикселей. В то время картинка имеет размер 200 на 100 пикселей. По умолчанию css прижимает картинку к верхнему левому углу, поэтому в свойстве :hover мы задаем позицию и сдвигаем нашу картинку на 100 пикселей, тем самым показывая ее вторую часть. Результат - смена без задержки.
На этом все. Спасибо за внимание /p>