Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS

Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS

Многие вебмастеры в погоне за красивостью и эффектностью (не путать с эффективностью) начинают внедрять эффекты, которые зачастую раздражают пользователей сайта.

Я часто наблюдаю в сети: загрузился сайт и при наведении на ссылку-картинку происходит загрузка новой картинки, которая выступает в качестве hover-эффекта ссылки.

Идея отличная, т.к. любая ссылка должна откликаться на наведение мыши, но реализация просто ужасная. Кстати, такую картину я наблюдал на сайте Сбербанк, сейчас возможно это уже убрали, не знаю.

Такое поведение ссылки-картинки выглядит очень неуважительно к пользователю. Сбербанк еще может себе позволить это, т.к. суточная посещаемость там зашкаливает, но начинающему сайту это не простительно.

Реализовать "правильный" эффект смены картинки, при наведении мышкой на ссылку, можно с помощью CSS.

Алгоритм действия этого приема CSS будет заключаться в том, что картинка, используемая для ссылки, будет загружаться сразу целиком, но показываться будет только часть. При наведении происходит ее смещение и показывается другая часть.

Как говориться: Все гениальное просто.

  1. Готовим картинку. Должно получится примерно так:
    Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS
    Где первая (верхняя) часть - это картинка без наведения указателя, а вторая (нижняя) часть - картинка после наведения указателя мыши. Все просто. Самое главное в изготовлении сделать 2 абсолютно одинаковых изображения, а то при наведении изображение на картинке будет скакать.
  2. Далее в CSS-файл вашего сайта нужно добавить:
    #rollover {
    background: url(/images/logo_fd.png);
    display: block;
    width: 80px;
    height: 74px;
    }

    #rollover:hover {
    background-position: 0 -74px;
    }
  3. В месте, где должно быть выведено изображение с эффектом, ставим:
  4. <div id="rollover"></div>

В результате всего этого деяния мы получим вот такой результат:

В последнее время стал задумываться о покупке квартиры. Задумываться - это же не покупать. Дак вот. Купить недвижимость в Новосибирске сравнимо с приобретением квартиры в Чехии. А Чехия - это Евросоюз, а Новосибирск - это Россия. Делайте выводы.

Комментарии:

  1. Win опубликовал комментарий 30 Июль 2010, 08:15 #

    CSS рулит

    | Ответить
  2. Alex666® опубликовал комментарий 9 Декабрь 2010, 22:14 #

    Вот дополненный код с кнопками для менюшки…
    http://armdgroup-tdu2.ucoz.ru/Bce_Dlya_menu/menu_click.html

    | Ответить
  3. Mut@NT опубликовал комментарий 10 Декабрь 2010, 23:27 #

    Alex666®: Вот дополненный код с кнопками для менюшки…
    http://armdgroup-tdu2.ucoz.ru/Bce_Dlya_menu/menu_click.html

    Не обижайтесь, но Ваша реализация гавно, от которого нужно избавляться. В Вашем случае картинки подгружаются после того как на нее навели мышкой, а это ой как неудачно. К примеру, с моим Интернетом – 64Кб/сек это топорность сразу лезет в глаза.

    | Ответить
  4. bryn опубликовал комментарий 7 Январь 2011, 20:23 #

    подскажите пожалуйста, а как сделать чтобы такая меняющаяся картинка работала как ссылка?

    | Ответить
    • Mut@NT опубликовал комментарий 13 Январь 2011, 22:06 #

      Делаем так:
      <a href=“http://adminway.ru”><div id=“rollover”></div></a>

      | Ответить
  5. Александр опубликовал комментарий 9 Февраль 2011, 00:36 #

    Спасибо брат! сутки мучился что бы именно на ЦСС замутить))

    | Ответить
    • Александр опубликовал комментарий 17 Февраль 2011, 11:14 #

      Простите, вопрос совсем от чайника:
      “Далее в CSS-файл вашего сайта нужно добавить”…
      Это куда? (с HTML уже подружился)…

      | Ответить
      • Mut@NT опубликовал комментарий 17 Февраль 2011, 11:39 #

        Если Вы используете отдельный файл CSS, то в него.
        Если его нет, то прямо в HTML-файле, в любом месте нужно добавить:
        <style type=“text/css”>

        #rollover {
        background: url(/images/logo_fd.png);
        display: block;
        width: 80px;
        height: 74px;
        }

        #rollover:hover {
        background-position: 0 -74px;
        }
        </style>

        | Ответить
        • Александр опубликовал комментарий 17 Февраль 2011, 13:39 #

          Да, уж…
          Простите, если я тут поспрашиваю со своего уровня!))) Думал, что все уже понял и… ничего не получается.
          Буду благодарен за “показ пальцем” без мудростей для “бывалых”:
          вот первая картинка – http://www.visionshop.su/images/stories/r2-2.jpg
          вот вторая, которая появляется при “мышании” – http://www.visionshop.su/images/stories/r3-2.jpg…
          Через FTP не нашел файл CSS
          Что нужно вставить в HTML страницы? Пожалуйста, подскажите!

          | Ответить
          • Mut@NT опубликовал комментарий 17 Февраль 2011, 17:08 #

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

            | Ответить
  6. Юрий опубликовал комментарий 24 Февраль 2011, 19:22 #

    Я конечно дико извиняюсь и ничего не критикую, Но сделав все как выше написано, а именно:
    __________________________________________________
    <style type=“text/css”>

    #rollover {
    background: url(/images/logo_fd.png);
    display: block;
    width: 80px;
    height: 74px;
    }

    #rollover:hover {
    background-position: 0 -74px;
    }
    </style>

    И добавив в контент

    <a href=“Ваша ссылка”><div id=“rulesover”></div></a>
    _________________________________________________________

    Получилось ровно 0.

    Долго я смотрел и не мог понять логической цепочки, откуда же берется вторая картинка в этом коде.

    В результате задолбался и решил подправить код, что бы все встало на свои места!

    Если Вам требуется сделать смену картинки без особых заморочек, то это Вам:

    _________________________________________________________

    Рисуем 2 картинки. Сохраняем в одну папочку имена к примеру: test.png и test-on.png (Назвать каждый индивидуально хоть ежиками можете, главное не забудьте!)

    CSS код:

    #rulesover {
    background: url(‘images/test.png’);
    display: block;
    width: 168px;
    height: 44px;
    }

    #rulesover:hover {
    background-position: 0 -44px;
    background: url(‘images/test-on.png’);
    }

    Далее идем в сам шаблон и в нем где хотим вывести картинку вставляем:

    <a href=“Ваша ссылка”><div id=“rulesover”></div></a>
    Без ссылки : <div id=“rulesover”></div>

    Все далее зависит только от знания кода и фантазии. поставив первой скажем jpg картинку вам ничто не мешает вторую сделать gif анимированную и в результате при наведении будет ваша анимация.

    Удачи всем, кто нашел себя здесь!)

    | Ответить
    • Mut@NT опубликовал комментарий 24 Февраль 2011, 19:28 #

      Картинка должна быть одна. В результате работы при наведении на картинку происходит ее сдвиг.
      Ваш пример показывает как не нужно делать картинки-ссылки. В вашем случае, вторая картинка будет подгружаться только после наведения.

      | Ответить
      • Юрий опубликовал комментарий 24 Февраль 2011, 20:34 #

        Да по большому счету, мне все равно будет она подгружаться при наведении или нет. Главное результат.
        Прочитать тут код и подумать это одно другое дело практика.
        По первоначальному коду я наконец таки понял как происходит у тебя смещение. Путем простого сдвига на пиксели. .т.е. картинка одна, но сделать ее и сохранить ровно на сдвиг, тем более если ты ее штрихуешь и подгоняешь в процессе сложно и в Этом есть большой недостаток! у тебя Картинка одна! сделать красивую анимацию не получиться это просто примитивно и все. в случае с двумя картинками есть поле для творчества.
        Я ничего не доказываю, а показываю как сделать надо для того, что бы люди могли воплощать с ЭТИМ кодом гораздо больше чем простой сдвиг.
        Всем только польза будет.

        P.S. Кстати Если Вы так уж привязалась к подгрузке картинки во время загрузки сайта что бы убрать на нет неказистость отображения при малой скорости интернета, то сделайте тупо и просто скрипт на ПРЕДКЕШ всех вообще картинок каких хотите и вставьте его в шапку сайта будет Вам радость))

        | Ответить
        • Mut@NT опубликовал комментарий 24 Февраль 2011, 21:44 #

          Если нужно поле для творчества то jQuery Вам в помощь. ;)
          Приведенный выше способ – это всего-лишь пример того, как можно сделать простой эффект смены картинки, который одинакого хорошо будет работать как на быстром интернете, так и на медленном. К тому же не будет проблем с мобильными устройствами.

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

          Без обид.

          | Ответить
  7. Алексей опубликовал комментарий 1 Март 2011, 00:16 #

    Мужик, молодец. Я обычно комментарии не пишу, но тут решил поблагодарить. Преподнес отлично! Спасибо!

    | Ответить
  8. skfo опубликовал комментарий 7 Июнь 2011, 15:52 #

    спасибо, красиво получилось

    | Ответить
  9. Алекс опубликовал комментарий 14 Июнь 2011, 14:29 #

    В девятом эксплорере не работает. Грусть…

    | Ответить
    • Admin опубликовал комментарий 20 Июнь 2011, 06:01 #

      Я думал они свои потуги на 8 остановят. Ан нет…
      Странно, что не работает

      | Ответить
  10. Влад опубликовал комментарий 29 Август 2011, 16:02 #

    Спасибо, Автор.
    Кстати, в IE такую фичу вообще не реализовать?

    | Ответить
    • SKL опубликовал комментарий 9 Октябрь 2012, 10:52 #

      Влад: Спасибо, Автор. Кстати, в IE такую фичу вообще не реализовать?

      у меня получилось так:
      вместо
      #rollover:hover {
      background-position: 0 -74px;
      }

      поставил
      a:hover #rollover {
      background-position: 0 -74px;
      }
      изаработало во всех браузерах

      | Ответить
  11. Antigen опубликовал комментарий 12 Апрель 2013, 17:15 #

    #compilation2 {
    background: url(../images/compilation2.jpg);
    display: block;
    width: 250px;
    height: 250px;
    }

    #compilation2:hover {
    background-position: 0 -250px;
    }

    картинка 1, 250х500 но получается сдвиг всего на 50% странно как-то…

    | Ответить
  12. Максим опубликовал комментарий 15 Ноябрь 2013, 16:46 #

    Тема полезная!Сам я начинающий программист 2-го курса,было интересно побаловаться.В статье довольно все четко описывается минут 30 и у меня все получилось.

    | Ответить
Имя
e-mail
Сайт
Текст комментария: