• Главная
  • Карта сайта
Не найдено

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

Опубликовано: 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 , для сайта , эффекты для сайта

Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью

rss