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

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

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

Картинка при наведении на ссылку

Здравствуйте уважаемые веб мастера!

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

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

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

Появляющаяся картинка при наведении на ссылку, помогает донести до посетителей более развёрнутую информацию.

Вот для примера я взял ссылку с одной из прошлых наших статей:

ЛУЧШИЙ ХОСТИНГ ДЛЯ ВАШЕГО САЙТА.
kak sdelat begushchuyu stroku html

Что самое интересное нам не потребуется внедрять какие либо скрипты или коды, в файлы темы, устанавливать специальные плагины нагружающие сервер.

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

Появление картинки при наведении на ссылку

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

<a class="imagetip" href="АДРЕС ССЫЛКИ" target="_blank">ТЕКСТ ССЫЛКИ<span>
<img class="alignnone" src="ССЫЛКА НА НУЖНОЕ ВАМ ИЗОБРАЖЕНИЕ"></span></a>

Вот пример ссылки приведённой выше:

 <a class="imagetip" href="https://abrek-ad-abra.ru/kakoj-xosting-vybrat/" target="_blank">ЛУЧШИЙ ХОСТИНГ ДЛЯ ВАШЕГО БЛОГА.<span>
<img class="alignnone" src="https://abrek-ad-abra.ru/wp-content/uploads/2015/03/kakoi-khosting-vybrat-dlya-saita.jpg"></span></a>

Как видите нечего сложного нет.
Всё, что мы имеем, это прописанный класс imagetip для css стилей об этом мы поговорим чуть позже и функция: target=«_blank», отвечающую за открытие ссылки в новом окне браузера.
Если вы не хотите, чтобы ссылка открывалась в новом окне, просто уберите данный участок из ссылки.

2. Как я уже сказал у нас прописан class=«imagetip» для стилей темы.
С помощью которых мы можем, как улучшить внешний вид самой ссылки, так и придать более точное расположения картинки, появляющийся при наведении курсора на ссылку.

Чтобы прописать стили. Вам нужно, в админ-панелье блога выбрать, внешний вид, редактор, далее style.css где в самый низ вставляем:

.imagetip span {
    left: 116px;
    position: absolute;
    visibility: hidden;
    width: 0%;
    z-index: 9999;
}
.imagetip:hover span {
    visibility: visible;
}

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

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

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

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

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

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

2 комментарияна “Картинка при наведении на ссылку”
  1. Максим:

    Подскажите пожалуйста! Как сделать две такие независимые ссылки на одной странице?

    Ответить
    • Administrator:

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

      Ответить

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

Внимание! Перед тем, как вставить в комментарий: 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-блог