Главная » Рецепты CSS » Три способа сделать так, чтобы картинка менялась при наведении курсора мыши

Три способа сделать так, чтобы картинка менялась при наведении курсора мыши

2015-03-25 / Вр:00:10 / просмотров: 21493

Многие веб-мастера на своих сайтах в меню или на кнопках используют такой эффект, когда картинки меняются при наведении на них курсора мышки. Если вас интересует, как осуществить такой эффект, то в этой статье, я расскажу о трех способах, с помощью которых можно сделать так, чтобы картинка менялась при наведении на нее курсора мыши.
Использую чистый CSS, без JavaScript и jQuery.

Способ №1 – использование двух картинок
Подготовьте два изображения. Они должны быть одинаковых размеров, но различными по цвету.

Три способа сделать так, чтобы картинка менялась при наведении курсора мыши

knopka-1.png

knopka-2.png

Теперь вставим эти две кнопки в файл:

<html>
 <head>
  <meta charset="utf-8">
  <title>Способ №1 - bloggood.ru</title>
  <style>
   a.rollover {
    background: url(knopka-1.png); /* рисунок, который увидим сразу  */
    display: block; /*  Рисунок как блочный элемент */
    width: 300px; /* Ширина рисунка */
    height: 100px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background: url(knopka-2.png); /* заменяемый рисунок при наведении мыши  */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

[посмотреть пример] или [скачать исходник]

Способ №2 – использование одной картинки
Подготовьте одну картинку. Но на картинке должно быть два изображения кнопки разных по цвету.

knopka-3.png

Вы, наверное, задаете себе вопрос, как картинка будет меняться на другую, если она одна?! Легко, за счёт использования свойства background-position.
Замена одного изображения на другое происходит с помощью сдвига по вертикали. Вот и все чудеса! Смотрите на код:

<html>
 <head>
  <meta charset="utf-8">
  <title>Способ №2 - bloggood.ru</title>
  <style>
   a.rollover {
    background: url(knopka-3.png); /* рисунок, который увидим сразу  */
    display: block; /*  Рисунок как блочный элемент */
    width: 280px; /* Ширина рисунка */
    height: 70px; /*  Высота рисунка */
   }
   a.rollover:hover {
    background-position: 0 -70px; /* Смещение фона */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

[посмотреть пример] или [скачать исходник]

Способ №3 – использование одной картинки и CSS-эффект

Возьмите картинку из способа №1, например, «knopka-1.png». Здесь нам понадобится только одна картинка. При наведении на картинку мышкой сработает CSS-эффект. Смотрите на код:

<html>
 <head>
  <meta charset="utf-8">
  <title>Способ №3 - bloggood.ru</title>
  <style>
   a.rollover {
    background: url(knopka-1.png); /* рисунок, который увидим сразу  */
    display: block; /*  Рисунок как блочный элемент */
    width: 300px; /* Ширина рисунка */
    height: 100px; /*  Высота рисунка */
   }
   a.rollover:hover {
    -webkit-filter: grayscale(100%); /* css-эффект при наведении мыши  */
   }
  </style>
 </head>
 <body>
  <p><a href="#" class="rollover"> </a></p>
  </body>
</html>

[посмотреть пример] или [скачать исходник]

Вот такие вот пироги на сегодня!

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

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

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

7 Ответов на комментарий - Три способа сделать так, чтобы картинка менялась при наведении курсора мыши

Тимофей

25.03.2015 в 12:20

Добрый день. Спасибо за блог, познавательно. Скажите, возможно ли с помощью CSS сделать, чтоб не конпка при наведении менялась, а надпись? Причём кнопок много и надписи разные. Или нужно функцию создавать?
Степан => автор блога

25.03.2015 в 13:59

Здравствуйте, Тимофей! Можно так сделать при помощи обычного СSS.
Почитайте вот эту статью и с помощью этих правил можно сделать то, что вы хотели.
Тимофей

25.03.2015 в 16:48

Спасибо за оперативность, но немного не то. Нужно чтоб менялся не стиль оформления текста на кнопке, а сам ТЕКСТ. т.е. на кнопке написано “Да”, при hover надпись должна меняться на “Нет”. такое возможно?

Степан => автор блога

30.03.2015 в 16:06

При нажатии на кнопку будет меняться текст:

<script>	
	function show_alert() 
{  
document.all("myButton").value = "Нет" }
</script>

<input ENGINE="button" value="Да" name="myButton" onClick="show_alert()" />

Чтобы изменился текст при наведении на нее мышкой, воспользуйтесь вот этим кодом:

<script type="text/javascript">
var i=1;
var text=new Array(5);
text[0]='Text1';
text[1]='Text2';
text[2]='Text3';
text[3]='Text4';
text[4]='Text5';
function change_text()
{
document.getElementById('text_change').innerHTML = text[i];
i++; if(i==5) i=0;
}
</script>
<span id="text_change" onmouseover="change_text()">Text1</span>

Тимофей

30.03.2015 в 22:50

Ух ты! Спасибо! Всё-таки функция, да ещё с явой! Спасибо большое! При первой возможности опробую
eslo

23.08.2017 в 11:00

Статья хорошая. А вот как сделать при наведение на картинку что с права левая картина изменила цвет ну типо правые варианты цветов а левая товар которая меняется в цвете.
Степан => автор блога

26.08.2017 в 14:27

а вы гуглили этот вопрос? Пробовали разобраться самостоятельно?