HTML Мигает кнопка при наведении

knopka
При создании кнопки из картинок мы имеем один недостаток:



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

Решение:
Для устранения этой задержки можно использовать не два изображения, а лишь одно.


Эффект перекатывания с одним рисунком

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

Изображение с двумя картинками

Рис. 1. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position, как показано в примере 2.

Пример 2. Изменение положения рисунка

 

 <head>
  <meta charset="utf-8">
  <title>Эффект перекатывания</title>
  <style>
   a.rollover {
    background: url(images/mark.png); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 151px; /* Ширина рисунка в пикселах */
    height: 40px; /* Высота рисунка */
   }
   a.rollover:hover {
    background-position: 0 -40px; /* Смещение фона */
   }
  </style>
 </head>
  <body>
  <p><a href="link.html" class="rollover"></a></p>
 </body>
</html>

Для селектора A устанавливается фоновое изображение через свойство background, ширина (width) совпадает с рисунком, а высота (свойство height) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

Источник: http://htmlbook.ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee

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