Изменение картинки при наведении с помощью сдвига фона css
Например у вас есть какое то меню. Пункты меню сделаны картинками. И вы хотели бы что бы при наведении на пункт меню картинка менялась, например был эффект "вдавливаемости" или светлела, не важно, что нарисуете то и будет.
Пишем следующее:
Создам картинку, в таком виде что бы сверху была картинка такая как она должна быть до наведения, ниже рисуем картинку после наведения. Смысл такое рисовать в том что у вас будет видна сначала неактивная зона, а потом с момощью CSS мы сделаем что бы картинка подымалась и становилась видна активная часть.
_____________
| без наведения |
---------------------
| с наведением |
--------------------
Одна картинка, два эффекта.
В CSS пишем:
-
a.but {
-
background: url(images/but.gif); /* картинка фона или ваш пункт меню */
-
display: block;
-
width: 138px; /* ширина вашей картинки */
-
height: 36px; /* высота картинки, ровно половина (в моем случае картинка высотой 72px) */
-
}
-
a.but:hover {
-
background-position: 0 -36px; /* отнимаем половину, тоесть сдвигаем картинку */
-
}
В HTML:
<a class="but" href="#"></a>
Изменение с помощью JS и с тем же CSS но с двумя картинками, то есть картинка до наведения и после, хороша но чем эффективен сдвиг что у вас грузиться одна картинка сразу, пусть и большая, а когда две картинки то сначала загрузилась одна, а потом вы навели и грузиться вторая. В общем у людей у которых медленный интернет заметы скачки (наводите. а у вас сначала ничего не видно. а потом загружаться картинка).
Вот и всё преимущество.
Надеюсь доступно объяснил. У меня с объяснениями как то не слаживаеться :)
Atoll A 22be r . Самые актуальные книги для начинающих программистов на css http://itstep.dp.ua/.