Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

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

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

Данный вариант способен предоставить посетителю дополнительную более развёрнутую информацию побуждая совершить переход на нужную вами страницу.

К тому-же, как я уже сказал ранее, для реализации данной задачи нам не потребуется прописывать дополнительные функции и коды в файлы темы, устанавливать специальные плагины а значит данный способ не как не будет влиять на скорость загрузки вашего ресурса.

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

Но давайте после небольшого отступления вернёмся к смене картинок при наведении курсора.

Итак, тестируем и переходим к установке.

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

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

Если вы читали прошлые статьи о том, как сделать бегущую строку и появление картинки при наведении курсора на ссылку, то знаете, что редактор WordPress способен распознавать далеко не все коды которые мы ему предлагаем. Поэтому часто после вставки ссылки нужной нам конструкции в режиме html и переключившись в визуальный режим, редактор превращает не понятную для него ссылку или код в более для себя понятный, что приводит наш код или ссылку в нерабочее состояние.

В отличии же от редактора WordPress, браузеры прекрасно понимают данные коды и отображают их без каких-либо эксцессов, что и даёт нам возможность с большим успехом использовать их на своих ресурсах.

И так, чтобы наша картинка могла сменяться при наведении на неё курсором.
Нам необходимо сначала в визуальном редакторе написать статью, всё тщательно проверить.
Далее, переключиться в режим html, найти нужное место и вставить нашу ссылку.

После этого не выходя из html, опубликовать статью и так-же не покидая данный режим редактора выйти из страницы редактирования записи.

Вот сам код ссылки, позволяющей сменять картинки при наведении курсора:

<a href="Ваша ссылка"target="_blank">
<img height="..." width="..." src="Ссылка картинки, появляющейся при наведении" alt="" onmouseout="this.src='Ссылка на картинку по умолчанию';" onmouseover="this.src='Ссылка на картинку, появляющейся при наведении';">
</a>

Давайте теперь по-подробней.

target=«_blank» говорит, что данная ссылка должна открываться в новом окне.
Если вам этого не нужно, просто уберите данный кусок кода.

height=«…» высота картинки, которая будет появляться при наведении курсора, width=«…» её ширина.

alt=«…» с помощью данного тега мы можем оптимизировать вашу картинку прописав ключевое слово для поисковых систем.

Как вы могли заметить следует прописать одну ссылку на картинку которая будет отображаться по умолчанию и две ссылки на одну и туже картинку которая будет появляться при наведении курсора.

Так выглядит ссылка приведённая мной в качестве примера:

<a href="https://abrek-ad-abra.ru/kakoj-xosting-vybrat/"target="_blank">
<img height="320" width="500" src="https://abrek-ad-abra.ru/wp-content/uploads/2014/11/kartinka-ssylka-.jpg" alt="смена картинки при наведении курсора" onmouseout="this.src='https://abrek-ad-abra.ru/wp-content/uploads/2015/03/luchshy-khosting-dlya-saita-webhost1.jpg';" onmouseover="this.src='https://abrek-ad-abra.ru/wp-content/uploads/2014/11/kartinka-ssylka-.jpg';"/>
</a>

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

Желаю успехов в творчестве до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2017-01-20

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:
Следующая статья

Комментарии к статье

14 комментариевна “Смена картинки при наведении курсора”
  1. Jonny:

    Спасибо! Обыскался данный скрипт в конструктивном формате: то супер-код на пол страницы, то вообще не работает. А тут одна строчка и все отлично функционирует.
    Еще раз спасибо вашему ресурсу!

    Ответить
    • Administrator:

      Здравствуйте Jonny рад, что смог вам помочь! Действительно хороший вариант, тоже уже не раз прибегал к его помощи.

      Ответить
  2. Виктор:

    Здравствуйте. Может подскажете мне, пытаюсь создать увеличение картинок при помощи CSS класс animate, вставляю код в файл template.css прописываю стили но ничего не работает, может не туда вставляю код? Стили прописываю вот так: Я теперь пользуюсь только вашим ресурсом и что я раньше не нашёл его, всё идеально просто и главное отлично работает! Не надо искать плагины и дополнительные расширения.

    Ответить
    • Артём:

      Здравствуйте, ваш вопрос не относится к материалам данной статьи.

      Ответить
    • Administrator:

      Виктор если честно, не совсем понял, что именно вы хотите сделать? Картинка должна увеличиваться при наведении курсора:

      avatars
      Тогда так:

      html
      <img class="avatars" src="http://ваша_картинка" alt="avatars"/>

      css
      .avatars {
      width: auto;
      height: auto;
      }
      .avatars:hover {
      width: 120px;
      height: auto;
      }

      Если же при нажатии так:

      html
      <img class="avatars" src="http://ваша_картинка" alt="avatars"/>

      css
      .avatars {
      width: auto;
      height: auto;
      }
      .avatars:active {
      width: 120px;
      height: auto;
      }

      Вот ещё есть скрипт увеличения изображений в статье при клике.

      Ответить
  3. Виктор:

    Здравствуйте. А можно сделать так же на css чтобы при наведении на картинку она плавно увеличивалась?

    Ответить
  4. Виктор:

    Здравствуйте. Да, хотел сделать, чтобы фото увеличивалось ПЛАВНО при наведении, но что то код не работает.

    Ответить
    • Administrator:

      Здравствуйте Виктор, не срабатывает код из статьи ссылку на которую я приводил выше?

      Думаю, если вам нужно именно плавное увеличение картинки при наведении, то кокой либо JavaScript, вам всё ровно использовать придётся!

      Как я понял вы хотите сделать у себя на блоге, что то подобное: «Плавное увеличение картинки при наведении курсора»

      Как вы понимаете я не могу описать весь процесс установки данного варианта увеличения картинки при наведении курсора, в комментариях, поэтому все подробности смотрите в исходном коде приведённой странички.

      Ответить
  5. Виктор:

    Здравствуйте. Подскажите пожалуйста, как расположить в один ряд по горизонтали 4 картинки, чтобы при наведении менялись?

    Ответить
    • Administrator:

      Виктор изображения уже являются строчными элементами, поэтому вам не требуется создавать какую либо дополнительную таблицу, просто прописывайте предложенный в статье код друг за дужкой:

      Как сделать красную кнопку не нажиматьЛегендарная красная кнопка не нажимать и её многочисленные аналогиМуха летающая по сайту — скриптПравильные кавычки wordpress и автоформатирование текста

      html:
      <p class="thumb">
      <a href="Ваша ссылка 1"target="_blank">
      <img src="Ссылка картинки, появляющейся при наведении 1" alt="" onmouseout="this.src='Ссылка на картинку по умолчанию 1';" onmouseover="this.src='Ссылка на картинку, появляющейся при наведении 1';">
      </a>
      <a href="Ваша ссылка 2"target="_blank">
      <img src="Ссылка картинки, появляющейся при наведении 2" alt="" onmouseout="this.src='Ссылка на картинку по умолчанию 2';" onmouseover="this.src='Ссылка на картинку, появляющейся при наведении 2';">
      </a>
      (и так далее...)
      </p>

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

      css:
      .thumb img {
      background: #fff none repeat scroll 0 0;
      border: 2px solid #55c5e9;
      height: auto;
      margin-bottom: 10px;
      margin-right: 6px;
      max-width: 9%;
      min-width: 100px;
      padding: 4px;
      margin-left: 0.2%
      }

      Чтобы избавиться от лишних пробелов между картинками, растяните код в одну строку.

      Ответить
      • Виктор:

        Здравствуйте. Спасибо, полностью сделал всё, как у вас, но картинки отображаются вертикально друг за другом, ничего не поменялось. CMS joomla.

        Ответить
        • Administrator:

          Виктор, скорее всего у вас задан слишком большой размер и изображения попросту не помещаются в одну строку. Изменяйте размер картинок в css стилях, то есть: width: 100px; (у нас ширина) height: 100px; (высота).

          Ответить
          • Виктор:

            Здравствуйте. Спасибо, что отвечаете. Но размеры картинок я разумеется указал, такие, какие у самих картинок, это width: 100px; and height: 100px; так что дело не в размерах картинок, а вот в чём не пойму, всё делаю в точности как у вас.

            Ответить
            • Administrator:

              Виктор, не вижу других причин, дело однозначно в размерах, возможно у вас неправильно подключены css стили, когда изменяете размер с width: 100px; на любой другой, изображение меняется?
              Попробуйте совсем вырезать из стилей строчки: width: 100px; и height: 100px; и временно укажите любой другой размер отличающейся от реального размера картинки непосредственно в самом коде:

              <a href="Ваша ссылка 1"target="_blank">
              <img src="Ссылка картинки, появляющейся при наведении 1" alt="" onmouseout="this.src='Ссылка на картинку по умолчанию 1';" onmouseover="this.src='Ссылка на картинку, появляющейся при наведении 1';" width="60" height="60">
              </a>

              Ответить

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог