Вверх

Блог
RSS лента

Изменение картинки при наведении с помощью сдвига фона css

Например у вас есть какое то меню. Пункты меню сделаны картинками. И вы хотели бы что бы при наведении на пункт меню картинка менялась, например был эффект "вдавливаемости" или светлела, не важно, что нарисуете то и будет.
Пишем следующее:

Создам картинку, в таком виде что бы сверху была картинка такая как она должна быть до наведения, ниже рисуем картинку после наведения. Смысл такое рисовать в том что у вас будет видна сначала неактивная зона, а потом с момощью CSS мы сделаем что бы картинка подымалась и становилась видна активная часть.
_____________
| без наведения |
---------------------
| с наведением |
--------------------
Одна картинка, два эффекта.

В CSS пишем:

  1. a.but {
  2.  background: url(images/but.gif); /* картинка фона или ваш пункт меню */
  3.  display: block;
  4.  width: 138px; /* ширина вашей картинки */
  5.  height: 36px; /* высота картинки, ровно половина (в моем случае картинка высотой 72px) */
  6. }
  7. a.but:hover {
  8.   background-position: 0 -36px; /* отнимаем половину, тоесть сдвигаем картинку */
  9. }

В HTML:
<a class="but" href="#"></a>

Изменение с помощью JS и с тем же CSS но с двумя картинками, то есть картинка до наведения и после, хороша но чем эффективен сдвиг что у вас грузиться одна картинка сразу, пусть и большая, а когда две картинки то сначала загрузилась одна, а потом вы навели и грузиться вторая. В общем у людей у которых медленный интернет заметы скачки (наводите. а у вас сначала ничего не видно. а потом загружаться картинка).
Вот и всё преимущество.
Надеюсь доступно объяснил. У меня с объяснениями как то не слаживаеться :)

Ваша оценка: Пусто Средняя: 4.2 (35 votes)
Atoll A 22be r . Самые актуальные книги для начинающих программистов на css http://itstep.dp.ua/.

Комментарии

Отправить комментарий

 
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Image links from G2 are formatted for use with Lightbox2
  • Image links with 'rel="lightshow"' in the <a> tag will appear in a Lightbox slideshow when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to video content with 'rel="lightvideo"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to inline or modal content with 'rel="lightmodal"' in the <a> tag will appear in a Lightbox when clicked on.

Подробнее о форматировании

CAPTCHA
Если вы человек, то тогда введите символы изображенные на картинке ниже
Image CAPTCHA
Введите символы, изображенные на картинке.
Главная | Портфолио | Услуги | Контакты | Блог