Задача. Сделать иконку цветной, при наведении на неё курсора мыши.


Этот способ позволяет значительно ускорить процесс загрузки сраницы, т.к. все иконки будут находится в одном файле и следовательно запрос к серверу будет один.


Для начала сделаем прозрачный gif с размерами
исходного изображения и вставим его как обычную картинку:

<a id="lorem" href="#"><img src="blank16.gif" width="16" height="16" />Get an idea</a>


Дальше, нужно склеить оба (цветной и черно-белый) варианта картинки в один файл:

Естественно, высота изображения умножается на количество иконок. Было 16×16, стало 16×32.


Теперь CSS:


#lorem img { /* Вставляем склеенную картику на фон прозрачного gif`а. */
background:url(/images/material-images/articles/lamp.gif) no-repeat 0 0;
}
#lorem:hover img {
background-position:0 -16px; /* А вот и фокус, фон с иконками сдвигается вверх на 16 пикселей… */
}
#lorem:hover {
background:inherit /* Это решает проблему с некорректной перезагрузкой фоновых изображений в IE. */
}

Радуемся результату: Get an idea


© Андрей

By Ruslan Novikov

Интернет-предприниматель. Фулстек разработчик. Маркетолог. Наставник.