iMarketing5.ru

18.12.2015 iMarketing5

Картинка, меняющаяся при наведении мыши

Мне часто приходится сталкиваться с задачей, когда заказчик сайта требует, чтобы кнопка, например, «Заказать звонок» менялась цветом при наведении на нее мышки. Если вы столкнулись с такой задачей и не знаете, как ее решить, то вы попали на правильную страницу.

Сегодня для вас меняющаяся картинка при наведении мышиперестанет быть проблемой.  Более того, вы научитесь делать этот эффект двумя способами: CSS и javascript. Я использую оба способа, и они оба мне нравятся. На одном сайте я использовал CSS способ, а на другом могу использовать javascript. И вы смотрите по ситуации и решайте, как вам будет проще.

Как сделать меняющуюся картинку при наведении на нее мыши?

Для примера я буду использовать две картинки:

— картинка-кнопка «knopka-1.png»

Как сделать меняющуюся картинку при наведении на нее мыши?

и картинка-кнопка после наведения на нее мыши «knopka-1-1.png»

Как сделать меняющуюся картинку при наведении на нее мыши?

Теперь  залейте эти кнопки в папку «images», если папки нет, создайте. А мы переходим к коду.

Способ №1 – с помощью CSS

В HTML вставляете вот такой код между тегами <body></body>:

1
<div class="knopka"><a href="http://bloggood.ru/"></a>

В CSS вставляете вот этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* кнопка  */
.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 */
}

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

Вот так будет выглядеть готовый код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="http://bloggood.ru/"></a>
</body>
</html>

Результат посмотрите в конце статьи.

Способ №2 – с помощью javascript

Схемка будет вот такой:

1
<a href="http://bloggood.ru/"><img onmouseover="this.src='картинка при наведении';" onmouseout="this.src='картинка, если отвести от нее курсор мыши';" border="0" alt="" src="картинка, которую мы видим сразу"></a>

Вот так будет выглядеть готовый код:

1
<a href="http://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>:

1
<div class="knopka2"><a href="http://bloggood.ru/"></a>

В CSS вставляете вот этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* кнопка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%); /* Эффект «Черно-белой кнопки» */
}

Эффекты можете добавлять любые.

Похожие статьи:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *