Картинка, меняющаяся при наведении мыши
Опубликовано: 06.09.2018
Мне часто приходится сталкиваться с задачей, когда заказчик сайта требует, чтобы кнопка, например, «Заказать звонок» менялась цветом при наведении на нее мышки. Если вы столкнулись с такой задачей и не знаете, как ее решить, то вы попали на правильную страницу.
Сегодня для вас меняющаяся картинка при наведении мыши перестанет быть проблемой. Более того, вы научитесь делать этот эффект двумя способами: CSS и javascript . Я использую оба способа, и они оба мне нравятся. На одном сайте я использовал CSS способ, а на другом могу использовать javascript. И вы смотрите по ситуации и решайте, как вам будет проще.
Как сделать меняющуюся картинку при наведении на нее мыши?
Для примера я буду использовать две картинки:
- картинка-кнопка « knopka-1.png »
и картинка-кнопка после наведения на нее мыши « knopka-1-1.png »
Теперь залейте эти кнопки в папку « images », если папки нет, создайте. А мы переходим к коду.
Способ №1 – с помощью CSS
В HTML вставляете вот такой код между тегами <body></body> :
<div class="knopka"><a href="https://bloggood.ru/"></a>В CSS вставляете вот этот код:
/* кнопка */ .knopka a { background:url(images/knopka-1.png) no-repeat; /* картинка 1 */ height:37px; /* высота картинки */ width:172px; /* ширина картинки */ display: block; /* отображаем картинку */ } /* кнопка при наведении мышки */ .knopka a:hover { background:url(images/knopka-1-1.png) no-repeat; /* картинка 2 */ }Подсказки в коде я написал, так что, думаю, проблем быть недолжно.
Вот так будет выглядеть готовый код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title>блог BlogGood.ru</title> <style> /* кнопка */ .knopka a { background:url(images/knopka-1.png) no-repeat; /* картинка 1 */ height:37px; /* высота картинки */ width:172px; /* ширина картинки */ display: block; /* отображаем картинку */ } /* кнопка при наведении мышки */ .knopka a:hover { background:url(images/knopka-1-1.png) no-repeat; /* картинка 2 */ } </style> </head> <body> <div class="knopka"><a href="https://bloggood.ru/"></a> </body> </html>Результат посмотрите в конце статьи.
Способ №2 – с помощью javascript
Схемка будет вот такой:
<a href="https://bloggood.ru/"><img onmouseover="this.src='картинка при наведении';" onmouseout="this.src='картинка, если отвести от нее курсор мыши';" border="0" alt="" src="картинка, которую мы видим сразу"></a>Вот так будет выглядеть готовый код:
<a href="https://bloggood.ru/"><img onmouseover="this.src='images/knopka-1-1.png';" onmouseout="this.src='images/knopka-1.png';" border="0" alt="" src="images/knopka-1.png"></a>Дополнение:
Можно было бы на этом закончить статью. Но буду чувствовать вину, если не договорю все до конца. Дело в том, что можно использовать одну картинку-кнопку, а с помощью css свойств сделать эффекты.
Для примера я буду использовать эту картинку:
- картинка-кнопка « knopka-1.png »
Способ №3 – с помощью CSS. Эффект черно-белой кнопки
В HTML вставляете вот такой код между тегами <body></body> :
<div class="knopka2"><a href="https://bloggood.ru/"></a>В CSS вставляете вот этот код:
/* кнопка2 */ .knopka2 a { background:url(images/knopka-1.png) no-repeat; /* картинка 1 */ height:37px; /* высота картинки */ width:172px; /* ширина картинки */ display: block; /* отображаем картинку */ } /* кнопка при наведении мышки */ .knopka2 a:hover { -webkit-filter: grayscale(100%); /* Эффект «Черно-белой кнопки» */ }Эффекты можете добавлять любые, посмотреть можете их здесь .
[ посмотреть демонстрацию ]
Вот теперь все!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: css , javascript , для сайта , эффекты для сайта
