Мне часто приходится сталкиваться с задачей, когда заказчик сайта требует, чтобы кнопка, например, «Заказать звонок» менялась цветом при наведении на нее мышки. Если вы столкнулись с такой задачей и не знаете, как ее решить, то вы попали на правильную страницу.
Сегодня для вас меняющаяся картинка при наведении мыши перестанет быть проблемой. Более того, вы научитесь делать этот эффект двумя способами: 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 стили для горизонтальных линий «HR»
Как установить кнопку «Помощь сайту» или «Пожертвования» от Webmoney
Популярные статьи:
-
Как узнать 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 Ответов на комментарий - Картинка, меняющаяся при наведении мыши
Добавить комментарий
Метки: css, javascript, для сайта, эффекты для сайта
Картинка, меняющаяся при наведении мыши
Спасибо большое за ценную информацию. Сделала,получилось. Вопрос такой при открытии сайта
я вижу надпись /knopka1.png и только при наведении на неё курсора она превращается в видимую ссылку.
Подскажите пожалуйста как это исправить…Плюс на смартфоне не видно вообще кнопки.
Заранее благодарна,
Елена
Здравствуйте, Елена! Хотел посмотреть кнопку на вашем сайте, но я там ее не нашел. Установите и я посмотрю в чем проблема! Напишите, какой способ вывода кнопки вы использовали.
Спасибо автору за хороший урок, у меня все получилось!
Пожалуйста, Иван!
Урок интересный, особенно для новичков. Вообще CSS сильная штука, можно делать прикольные эффекты не применяя JAVA. Но в принципе кому как удобнее.
Мне кажется, что CSS легче выучить чем JAVA. Или Вы, Александр, имеете ввиду не JAVA а javascript?
Доброго вечера Степан.
Возникла проблемка небольшая, поэтому решил обратиться к Вам, т.к. Вы не один раз уже давали мне грамотные и понятные советы. Вопрос как раз по теме поста.
Написал я вот такой код
<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>Он прекрасно работал и в один прекрасный день, при наведении мышки на картинку, она перестала меняться на другую картинку. В стилях и кодах не менял ничего… Вот просто взяло и перестало работать.. В чем может быть проблема ? Буду очень благодарен за совет. Спасибо заранее.
Для начала, вот это внутри обработчика события, не очень гуд (может после обновления браузера оно и перестало именно из-за этого работать).
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; Если не заработает, то нужно ковырять ф-цию. Ссылку можно, я гляну?
Добрый вечер Степан. Я отправил Вам через форму обратной связи ссылку на сайт, Вам пришло мое сообщение ?
Здравствуйте, Александр!
Нет, не пришло.
Пришлите через комментарий, я его не опубликую
Здравствуйте Степан !
[ссылка скрыта] на главной стоит старый код и при наведении загорается только текст ссылки
а вот на другой странице этого же сайта [ссылка скрыта] я поковырялся в первой слева картинки и она стала изменяться, но перестал загораться текст под ней… Раньше всё это работало вместе при наведении мыши и на картинку и на текст под нее. То есть при наведении на картинку менялась она и загорался текст, а при наведении на текст загорался текст и менялась картинка…
Здравствуйте, Александр!
Я бы глянул, если бы Вы открыли возможность посмотреть исходный код.