BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

Многие веб-мастера на своих сайтах в меню или на кнопках используют такой эффект, когда картинки меняются при наведении на них курсора мышки. Если вас интересует, как осуществить такой эффект, то в этой статье, я расскажу о трех способах, с помощью которых можно сделать так, чтобы картинка менялась при наведении на нее курсора мыши.
Использую чистый 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>

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

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

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

Получай обновления блога!!! Подпишись:

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

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

  1. Тимофей

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

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

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

  3. Тимофей

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

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

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

    <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>
    
  5. Тимофей

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

  6. eslo

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

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

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

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки:

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573