Меню Рубрики

Изменение картинки при наведении курсора

В данной статье рассмотрим, как происходит изменение картинки при наведении курсора. Не стоит путать со статьей про Плавное увеличение картинки при наведении курсора. Давайте посмотрим пример!

 

Как видите, при наведении курсора на картинку, она меняется.
А теперь давайте рассмотрим, как можно сделать изменение картинки при наведении курсора.

1. Находим 2 картинки

2. Пишем Html код в новой записи

3. Добавляем стили.

1. Для начала найдем 2 картинки:

Изменение картинки при наведении Изменение картинки при наведении

До наведения курсора на картинку, показывается знак вопрос, при наведении — восклицательный знак. Теперь необходимо загрузить их на свой сайт. Для этого, в админке WordPress нажмите «Медиафайлы»,  добавить новый.

2. Создать новую запись в WordPress и перейти в текстовый режим. Здесь нужно будет вставить код

<a href="#" <span class="img1"></span></a>

Вместо # можете написать ссылку на страницу, на которую необходимо перейти при нажатии на картинку.

Пример:

<a href="blognovichok.ru" <span class="img1"></span></a>

При нажатии на картинку, вы перейдете на мой сайт.

img1 — это класс, который мы присвоили картинке.

Image 13. Теперь осталось прописать стили для нашей будущей картинки.

В корне вашего сайта, откройте файл Style.css, и в самом конце вставьте код:

.img1 {
    background: url("ссылка на картинку 1"); /* Путь к файлу с исходным рисунком  */
background-size: cover;
    display: block; /*  Рисунок как блочный элемент */
    width: 128px; /* Ширина рисунка */
    height: 128px; /*  Высота рисунка */
margin:0 auto;
    padding: 0; 
      }
   .img1:hover {
    background: url("Ссылка на картинку 2"); /* Путь к файлу с заменяемым рисунком  */
background-size: cover;
   }

Чтобы узнать ссылку на картинку, во вкладке «Медиафайлы» откройте картинку и скопируйте ссылку.

Image 2Теперь при наведении курсора,  картинка будет меняться.

Если возникли вопросы, можете написать в комментариях.

Понравилась статья или оказалась полезной,  пожалуйста поставьте оценку, чуть ниже 🙂

[Всего голосов: 1    Средний: 5/5]

Комментарии:

2 комментария на «“Изменение картинки при наведении курсора”»

  1. Моя проблема. Мышкой управлять курсором не могу, руки больны, работаю лишь одной правой рукой. Поэтому пользуюсь тачпадом. При этом со всех 4-х сторон курсора появляются какие-то линеечки-приставки или стрелочки, из-за которых изображение экрана носится по нему как угорелое, что, естественно, нервирует! Как я понимаю, у курсора при этом некоторые функции, которые мне мешают и надо их отключить. А вот как их отключить, как его утихомирить? Все мои попытки самому исправить, не удались.
    Буду весьма признателен за помощь!

  2. Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2017 Онлайн журнал - Blognovichok.ru· Авторские права защищены.
Все материалы опубликованные на сайте являются объектами авторского права. Использование материалов разрешается только с активной ссылкой на blognovichok.ru