Мне часто приходится сталкиваться с задачей, когда заказчик сайта требует, чтобы кнопка, например, «Заказать звонок» менялась цветом при наведении на нее мышки. Если вы столкнулись с такой задачей и не знаете, как ее решить, то вы попали на правильную страницу.
Сегодня для вас меняющаяся картинка при наведении мыши перестанет быть проблемой. Более того, вы научитесь делать этот эффект двумя способами: CSS и javascript. Я использую оба способа, и они оба мне нравятся. На одном сайте я использовал CSS способ, а на другом могу использовать javascript. И вы смотрите по ситуации и решайте, как вам будет проще.
Как сделать меняющуюся картинку при наведении на нее мыши?
Для примера я буду использовать две картинки:
- картинка-кнопка «knopka-1.png»
и картинка-кнопка после наведения на нее мыши «knopka-1-1.png»
Теперь залейте эти кнопки в папку «images», если папки нет, создайте. А мы переходим к коду.
Способ №1 – с помощью CSS
В HTML вставляете вот такой код между тегами <body></body>:
<div class="knopka"><a href="https://bloggood.top/"></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.top</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.top/"></a>
</body>
</html>
Результат посмотрите в конце статьи.
Способ №2 – с помощью javascript
Схемка будет вот такой:
<a href="https://bloggood.top/"><img onmouseover="this.src='картинка при наведении';" onmouseout="this.src='картинка, если отвести от нее курсор мыши';" border="0" alt="" src="картинка, которую мы видим сразу"></a>
Вот так будет выглядеть готовый код:
<a href="https://bloggood.top/"><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.top/"></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
Описание популярных счетчиков посещения сайта
Свойства цвета в CSS
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 331671 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 275609 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 226702 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 193200 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 187094
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; Если не заработает, то нужно ковырять ф-цию. Ссылку можно, я гляну?
Добрый вечер Степан. Я отправил Вам через форму обратной связи ссылку на сайт, Вам пришло мое сообщение ?
Здравствуйте, Александр!
Нет, не пришло.
Пришлите через комментарий, я его не опубликую
Здравствуйте Степан !
[ссылка скрыта] на главной стоит старый код и при наведении загорается только текст ссылки
а вот на другой странице этого же сайта [ссылка скрыта] я поковырялся в первой слева картинки и она стала изменяться, но перестал загораться текст под ней… Раньше всё это работало вместе при наведении мыши и на картинку и на текст под нее. То есть при наведении на картинку менялась она и загорался текст, а при наведении на текст загорался текст и менялась картинка…
Здравствуйте, Александр!
Я бы глянул, если бы Вы открыли возможность посмотреть исходный код.