BloGGood.ru

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

WordPress, PHP, HTML, CSS, Windows

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

Главная » Эффекты для сайта » Картинка, меняющаяся при наведении мыши

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

2014-11-02 / Вр:21:12 / просмотров: 11421

Мне часто приходится сталкиваться с задачей, когда заказчик сайта требует, чтобы кнопка, например, «Заказать звонок» менялась цветом при наведении на нее мышки. Если вы столкнулись с такой задачей и не знаете, как ее решить, то вы попали на правильную страницу.

Сегодня для вас меняющаяся картинка при наведении мыши перестанет быть проблемой.  Более того, вы научитесь делать этот эффект двумя способами: CSS и javascript. Я использую оба способа, и они оба мне нравятся. На одном сайте я использовал CSS способ, а на другом могу использовать javascript. И вы смотрите по ситуации и решайте, как вам будет проще.

Как сделать меняющуюся картинку при наведении на нее мыши?

Для примера я буду использовать две картинки:

- картинка-кнопка «knopka-1.png»

Как сделать меняющуюся картинку при наведении на нее мыши?

и картинка-кнопка после наведения на нее мыши «knopka-1-1.png»

Как сделать меняющуюся картинку при наведении на нее мыши?

Теперь  залейте эти кнопки в папку «images», если папки нет, создайте. А мы переходим к коду.

Способ №1 – с помощью CSS

В HTML вставляете вот такой код между тегами <body></body>:

<div class="knopka"><a href="/"></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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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="/"></a>
</body>
</html>

Результат посмотрите в конце статьи.

Способ №2 – с помощью javascript

Схемка будет вот такой:

<a href="/"><img onmouseover="this.src='картинка при наведении';" onmouseout="this.src='картинка, если отвести от нее курсор мыши';" border="0" alt="" src="картинка, которую мы видим сразу"></a>

Вот так будет выглядеть готовый код:

<a href="/"><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="/"></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%); /* Эффект «Черно-белой кнопки» */
}

Эффекты можете добавлять любые, посмотреть можете их здесь.

[посмотреть демонстрацию]

Вот теперь все!

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

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

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

12 Ответов на комментарий - Картинка, меняющаяся при наведении мыши

  1. Елена

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

    Спасибо большое за ценную информацию. Сделала,получилось. Вопрос такой при открытии сайта
    я вижу надпись /knopka1.png и только при наведении на неё курсора она превращается в видимую ссылку.
    Подскажите пожалуйста как это исправить…Плюс на смартфоне не видно вообще кнопки.
    Заранее благодарна,
    Елена

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

    Здравствуйте, Елена! Хотел посмотреть кнопку на вашем сайте, но я там ее не нашел. Установите и я посмотрю в чем проблема! Напишите, какой способ вывода кнопки вы использовали.

  3. Иван

    Спасибо автору за хороший урок, у меня все получилось!

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

    Пожалуйста, Иван!

  5. Урок интересный, особенно для новичков. Вообще CSS сильная штука, можно делать прикольные эффекты не применяя JAVA. Но в принципе кому как удобнее.

  6. Avatar photo Степан => автор блога

    Мне кажется, что CSS легче выучить чем JAVA. Или Вы, Александр, имеете ввиду не JAVA а javascript?

  7. Александр

    Доброго вечера Степан.

    Возникла проблемка небольшая, поэтому решил обратиться к Вам, т.к. Вы не один раз уже давали мне грамотные и понятные советы. Вопрос как раз по теме поста.
    Написал я вот такой код

    <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>

    Он прекрасно работал и в один прекрасный день, при наведении мышки на картинку, она перестала меняться на другую картинку. В стилях и кодах не менял ничего… Вот просто взяло и перестало работать.. В чем может быть проблема ? Буду очень благодарен за совет. Спасибо заранее. :arrow:

  8. Avatar photo Степан => автор блога

    Для начала, вот это внутри обработчика события, не очень гуд (может после обновления браузера оно и перестало именно из-за этого работать).

    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; Если не заработает, то нужно ковырять ф-цию. Ссылку можно, я гляну?

  9. Александр

    Добрый вечер Степан. Я отправил Вам через форму обратной связи ссылку на сайт, Вам пришло мое сообщение ?

  10. Avatar photo Степан => автор блога

    Здравствуйте, Александр!
    Нет, не пришло.
    Пришлите через комментарий, я его не опубликую

  11. Александр

    Здравствуйте Степан !

    [ссылка скрыта] на главной стоит старый код и при наведении загорается только текст ссылки
    а вот на другой странице этого же сайта [ссылка скрыта] я поковырялся в первой слева картинки и она стала изменяться, но перестал загораться текст под ней… Раньше всё это работало вместе при наведении мыши и на картинку и на текст под нее. То есть при наведении на картинку менялась она и загорался текст, а при наведении на текст загорался текст и менялась картинка… :?:

  12. Avatar photo Степан => автор блога

    Здравствуйте, Александр!
    Я бы глянул, если бы Вы открыли возможность посмотреть исходный код.

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

;-) :| :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

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

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