КАК СДЕЛАТЬ КАРТИНКУ (БАНЕР) КЛИКАБЕЛЬНОЙ?

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

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

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

Сегодня я покажу самый простой способ.

Прежде всего, нужно иметь картинку, которая несет информацию. Потом понадобится адрес этой картинки в Интернете. Если Вы нашли картинку в Интернете, то ее адрес можно получить, кликнув правой кнопкой мышки, наведя курсор на эту картинку. В всплывшем окошке выбираем “Копировать URL картинки”, открываем блокнот и сохраняем там полученный адрес.

Если у Вас есть своя картинка, то для получения ее адреса можно воспользоваться сайтом http://radikal.cc . На этот сайт Вы загружаете нужную Вам картинку и получаете ссылку. Все Ваши действия смотрите на скрине. Зайдя на сайт, откроется страница, на которой Вам понадобится обозначенное ниже окно:

Нажимаете – «ВЫБРАТЬ ФАЙЛ». Картинку заранее сохраните на рабочем столе. После того, как картинка появится в окне – Нажимаете « ЗАГРУЗИТЬ НА СЕРВЕР». Но можно сделать надпись ( выше картинки есть поле), которая будет всплывать при на ведении курсора. Смотрим ниже:

После загрузки на сервер появится окно со ссылкой. В маленьком окошке (показано стрелкой) выбирайте «Ссылка», и Вы получите именно ту ссылку, которая нужна.

Имея ссылку на картинку и ссылку – куда Вы хотите направить посетителя, вставляем ее в файл, который я Вам даю ниже.

<a href=”Адрес страницы, на которую будет указывать баннер” target=_blank><img src=”Адрес картинки из Интернета или из Радикала (ссылка№1)” border=”0″ title=”Текст, который появляется, при наведении на ссылку” width=100 height=100></a>

Первый адрес страницы, куда вам нужно направить посетителя.
Второй – адрес картинки из Интернета, или с сайта http://radikal.cc

Этот файл редактировать можете в ВОРДЕ, как я показал, потом скопировать его в блокнот и сохранить. Получится готовый вариант такой:

<a href=”www.a.artbaks.com” target=_blank><img src=”http://s019.radikal.ru/i637/1704/20/a736a32ea7ba.jpg” border=”0″ title=”Получите супер курс” width=100 height=100></a>

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

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

Если Вам что-то не понятно, пишите мне на почту – info@artbaks.com, или напишите в комментариях.
С уважением Валентин.

Лучший способ выразить благодарность автору – поделиться с друзьями!

Вы не забыли Поделиться статьей в СоцСетях?

Отправить ответ

avatar
  Subscribe  
Уведомлять