Как оптимизировать загрузку изображений для кнопок

19 марта 2008, Написано в CSS

В CSS мы можем применить псевдо-класс :hover к ссылке и добавить свойства, которые будут задействованы при наведении указателя на ссылку.

a:link, a:visited {
    width: 160px;
    height: 30px;
    display: block;
    overflow: hidden;
    background: url(images/nav1.gif) 0px 0px no-repeat;
}
a:hover, a:active {
    background-position: 0px -30px;
}

Изображение nav1.gif содержит в себе сразу два состояния кнопки, а при наведении меняется положение фона:

Как оптимизировать загрузку изображений для кнопок

Оригинал: How to make Buttons with Hover Load Faster

Надо заметить что эту технику можно применять не только к кнопкам, но и к другим элементам. Например на известном видеохостинге Youtube в одном изображении объединены сразу несколько графических элементов:

Youtube

5 комментариев к статье «Как оптимизировать загрузку изображений для кнопок»:

  1. TheBits:
    19 Мар 2008 в 14:45

    Такая техника называется спрайты или css спрайты.
    Например на Яндексе тоже есть: http://img.yandex.net/i/www/icons.png

    Ответить
  2. Life Style – HTML и CSS, доступность и юзабилити » » Резиновые закладки с помощью одного изображения и CSS:
    24 Мар 2008 в 12:22

    [...] фон изменялся мы будем использовать позиционирование фона для каждого [...]

    Ответить
  3. Лучшее для веб-мастеров и блогеров за март 2008 - Часть 1 » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров о:
    4 Апр 2008 в 07:34

    [...] Как оптимизировать загрузку изображений для кнопок В CSS мы можем применить псевдо-класс :hover к ссылке и добавить свойства, которые будут задействованы при наведении указателя на ссылку. [...]

    Ответить
  4. Tanu:
    8 Апр 2008 в 21:49

    Просто супер. Я как-то хотел исследовать youtube на то, как в нем устроены кнопки. Я открыл его в виде хтмл и на этом дело и остановилось. А тут как раз это описано.
    Спасибо.

    Ответить
  5. Alex:
    25 Апр 2008 в 14:55

    Как раз то, что надо одному моему вебсайту. Спасибо за информацию. Почаще обновляйте блог!

    Ответить

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