Главная » Эффекты для сайта » Картинка, меняющаяся при наведении мыши

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

2014-11-02 / Вр:21:12 / просмотров: 11421

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

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

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

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

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

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

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

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

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

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

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

<div class="knopka"><a href="/"></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" "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="/"></a>
</body>
</html>

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

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

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

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

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

<a href="/"><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="/"></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%); /* Эффект «Черно-белой кнопки» */
}

Эффекты можете добавлять любые, посмотреть можете их здесь.

[посмотреть демонстрацию]

Вот теперь все!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Популярные статьи:

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329815
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274369
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 220443
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186394
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 181501

12 Ответов на комментарий - Картинка, меняющаяся при наведении мыши

Елена

03.12.2014 в 20:04

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

Спасибо большое за ценную информацию. Сделала,получилось. Вопрос такой при открытии сайта
я вижу надпись /knopka1.png и только при наведении на неё курсора она превращается в видимую ссылку.
Подскажите пожалуйста как это исправить…Плюс на смартфоне не видно вообще кнопки.
Заранее благодарна,
Елена
Степан => автор блога

05.12.2014 в 08:31

Здравствуйте, Елена! Хотел посмотреть кнопку на вашем сайте, но я там ее не нашел. Установите и я посмотрю в чем проблема! Напишите, какой способ вывода кнопки вы использовали.
Иван

29.03.2015 в 13:06

Спасибо автору за хороший урок, у меня все получилось!
Степан => автор блога

30.03.2015 в 08:29

Пожалуйста, Иван!
Александр

05.01.2016 в 18:55

Урок интересный, особенно для новичков. Вообще CSS сильная штука, можно делать прикольные эффекты не применяя JAVA. Но в принципе кому как удобнее.
Степан => автор блога

12.01.2016 в 00:38

Мне кажется, что CSS легче выучить чем JAVA. Или Вы, Александр, имеете ввиду не JAVA а javascript?
Александр

08.11.2016 в 20:19

Доброго вечера Степан.

Возникла проблемка небольшая, поэтому решил обратиться к Вам, т.к. Вы не один раз уже давали мне грамотные и понятные советы. Вопрос как раз по теме поста.
Написал я вот такой код
```
<a href="ссылка на страницу" class="kkk" onMouseOver="changeImages('n1', 'wp-content/uploads/icon1_.png'); return true;" onMouseOut="changeImages('n1', 'wp-content/uploads/icon1.png'); return true;"><center><img src="wp-content/uploads/icon1.png" name="n1" /></center><br /><div style="padding-left:30px;">Текст <br />Текст <br />Текст <br />Текст</div></a>
```
Он прекрасно работал и в один прекрасный день, при наведении мышки на картинку, она перестала меняться на другую картинку. В стилях и кодах не менял ничего… Вот просто взяло и перестало работать.. В чем может быть проблема ? Буду очень благодарен за совет. Спасибо заранее.
Степан => автор блога

09.11.2016 в 22:08

Для начала, вот это внутри обработчика события, не очень гуд (может после обновления браузера оно и перестало именно из-за этого работать).
```
changeImages('n1', 'wp-content/uploads/icon1_.png'); return true;
```
Не желательно 2 действия там выполнять.

если уж очень нужно что-то возвращать – true или false, то лучше это делать так:
```
onMouseOver="return changeImages('n1', 'wp-content/uploads/icon1_.png');"
```
а уже внутри функции прописывать что именно – true или false.

Во вторых, return true; там вообще лишнее.

В третьих, неизвестно, что прописано в ф-ции changeImages()

Так что, для начала, уберите это return true; Если не заработает, то нужно ковырять ф-цию. Ссылку можно, я гляну?
Александр

14.11.2016 в 19:20

Добрый вечер Степан. Я отправил Вам через форму обратной связи ссылку на сайт, Вам пришло мое сообщение ?
Степан => автор блога

15.11.2016 в 23:31

Здравствуйте, Александр!
Нет, не пришло.
Пришлите через комментарий, я его не опубликую
Александр

16.11.2016 в 08:58

Здравствуйте Степан !

[ссылка скрыта] на главной стоит старый код и при наведении загорается только текст ссылки
а вот на другой странице этого же сайта [ссылка скрыта] я поковырялся в первой слева картинки и она стала изменяться, но перестал загораться текст под ней… Раньше всё это работало вместе при наведении мыши и на картинку и на текст под нее. То есть при наведении на картинку менялась она и загорался текст, а при наведении на текст загорался текст и менялась картинка…
Степан => автор блога

21.11.2016 в 15:54

Здравствуйте, Александр!
Я бы глянул, если бы Вы открыли возможность посмотреть исходный код.