• Главная»
  • Уроки»
  • CSS»
  • Плавная замена одного изображения другим с использованием спрайта CSS

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

Использование смены изображений очень легко выполнить с помощью CSS. Задаем элементу фоновое изображение, а затем в его псевдо элементе :hover изменяем background-image. Самым лучшим способом будет совмещение обоих изображений в одно и использование сдвига в background-position. Такая техника называется спрайтом CSS. А если нам нужно плавно заменять одно изображение на другое без резких сдвигов?

 

Решение задачи заключается в использовании дополнительного элемента поверх оригинала с нулевым значением свойства opacity и значением свойства  background-position, установленным в нужное значение. Затем в псевдо элементе :hover плавно изменяем прозрачность. Есть три метода сделать указанное действие. Покажем на примере маленькой стрелочки.

Спрайт

 

Способ первый (разумный прогресс)

Поместим элемент span  в оригинальный элемент. Данный элемент span будет отображать активированное состояние. Да, излишняя разметка - плохо, но нам нужен дополнительный элемент, а псевдо элемент не поддерживает переходы в большинстве браузеров.

<a href="#" class="arrow">Стрелочка<span></span></a>

Стрелка использует замещение изображений CSS и расположение фона в позицию по умолчанию.

.arrow {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 36px;
        height: 36px;
        background: url(sprites.png) no-repeat;
}

Здесь используется относительное позиционирование для элемента span, который будет позиционироваться абсолютно с тем же самым размером. Положение фона будет сдвигаться на место для смены изображений. Его прозрачность устанавливается в ноль и будут использоваться трансформации CSS3 для размещения его на место.

.arrow span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
}

Затем при активации элемента изменяется прозрачность:

.arrow:hover span {
        opacity: 1;
}

 

Способ второй (на пике технологий)

Единственная причина, по которой мы используем элемент span - на момент написания урока только Firefox 4 поддерживал трансформации для псевдо элементов. Логично предполагать, что в будущем WebKit и другие браузеры также будут их поддерживать. Мы можем изменить разметку следующим образом:

<a href="#" class="arrow">Стрелочка</a>

А код CSS практически такой же, только мы используем  :after вместо span:

.arrow:after {
        content: "";
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
        opacity: 0;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
}

.arrow:hover:after {
        opacity: 1;
}

 

Способ третий (поддерживаем наработки)

Некоторые браузеры не поддерживают ни псевдо элементы, ни трансформации. Если нужно сохранить кросс-браузерность приложения, то придется использовать  избыточную разметку HTML и полагаться на JavaScript (jQuery...). Снова возвращаемся к элементу span.

<a href="#" class="arrow">Стрелочка<span></span></a>

Код CSS почти такой же, как и для выше обозначенных методов, но существенно упрощен, так как мы не используем псевдо классы и трансформации.

.arrow {
        display: inline-block;
        position: relative;
        text-indent: -9999px;
        width: 36px;
        height: 36px;
        background: url(sprites.png) no-repeat;
}
.arrow span {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        background: url(sprites.png) no-repeat;
        background-position: -50px 0;
}

jQuery будет управлять затуханием. Сначала мы скрываем элемент span, затем присоединяем функции для обработки событий mouseenter и mouseleave через функцию hover для реализации затухания.

$(function() {
        $(".arrow3")
        .find("span")
        .hide()
        .end()
        .hover(function() {
                $(this).find("span").stop().fadeIn();
        }, function() {
                $(this).find("span").stop().fadeOut();
        });
});

Все три способа использованы на странице демонстрации.

demosourse

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/fade-image-within-sprite/
Перевел: Сергей Фастунов
Урок создан: 18 Марта 2011
Просмотров: 57892
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 18 Марта 2011 21:17
    Slavoz
    в хроме вариант с jQuery не пашет.
    • 18 Марта 2011 21:25
      notbot
      Пашет.
      • 14 Июня 2011 13:15
        Faraonic
        Он то пашет то не пашет сам пробовал, если сразу навести на jQuery то пашет а если поигратся с 1 и 2 примером и навести курсором на jQuery то не будет работать
  • 18 Марта 2011 21:24
    notbot
    Хорошо, мне понравилось!
  • 18 Марта 2011 21:34
    Zedamin
    В Хроме 1 способ работает норм, 2 не плавно, 3 способ то работает, то нет. В остальных браузерах норм, IE как всегда.
    • 19 Марта 2011 10:16
      antoxa_e
      В Хроме 3 способ перестает работать если на стрелку быстро навести и убрать, курсор мыши, несколько раз подряд.
  • 19 Марта 2011 15:33
    art_reklama_com
    В Хроме все 3 способа работают нормально
    • 20 Марта 2011 14:16
      Денис Никаноров
      не не знаю.....
  • 20 Марта 2011 04:18
    rubyx
    нижний работает плавно, но когда я просто по"дёргал" курсором по всему листу, перестал работать вообще потом... Отнесу я это на мусорку:) Пусть тот мастер доделает кнопку "jQuery" и чтоб после нажатия работала так-же как в первый раз!
  • 20 Марта 2011 04:25
    rubyx
    в Chrome работает, на Internet Explorer 9 покажет вторую и третью кнопку, на Firefox проблема указана свыше. По моему Firefox-ом большинство пользуются ещё, так что я подожду поправку, а сам щас занят своим сайтом...
  • 20 Марта 2011 09:46
    gigantvirus
    не работает IE6.
    • 22 Марта 2011 15:54
      rubyx
      IE6 уже забыть надо:)) да и вообще IE не браузер, а "перевёртыш" сайтов))
  • 18 Мая 2011 00:28
    htmlcss
    народ. а зачем вообще использовать span? помоему можно обойтись так: <a class="strelka" href="#"></a> .strelka{ width:36px; height:36px; background: url(sprites.png) no-repeat; display:block; - переводим ссылку в блочный элемент и ни какого spanа ненадо } .strelka:hover{opacity: 1;} посмотрите сколько кода можно сэкономить. зачем лишние элементы добавлять непонимаю. У вас во всех уроках лишнего кода хоть ж..й жуй.
  • 13 Декабря 2012 12:57
    VoVoChKa
    Доброго времени суток, очень понравилась данная статья, и я хотел уточнить, возможно ли прописать еще и на :active таким же образом CSS код, что бы в браузере Opera спрайт стал полностью работоспособным? И если да, то как примерно будет выглядеть код? Просто при использовании спрайтов с растровыми картинками - псевдоклас :active напрочь игнорируется данным браузером при отображении результата. Заранее благодарю за внимание.
  • Комментарий удален
    • 21 Марта 2011 00:02
      MBOY
      Даааа, Сайт отстой и безвкусица полнейшая! Метод CSS кое-где подправить и работает кроссбраузерно.
^ Наверх ^