Как правильно вставить ссылку в картинку в WordPress и с помощью html. Ссылка на изображение url как вставить на сайт


Как Сделать Картинку (Ссылкой) в HTML За Пару Минут

Как сделать картинку ссылкой в html на сайте

как сделать картинку ссылкой

Добрый день. Примерно год назад, я написал статью: — «Как сделать флешь баннер?». В данной статье я решил продолжить эту тему, но в более простом виде. Поговорим мы не про создание баннера, а просто о том, как сделать картинку ссылкой. Например, картинка вверху является ссылкой, ведущей на мой партнерский курс «Как снять фильм». Можете кликнуть, и убедиться, как это работает!

Зачем нужно делать из картинки ссылку

а) К примеру, у вас имеется красивая картиночка замечательного товара. Вы создаете из нее ссылку, вставляете её на определенный ресурс. Человек заходит на данный сайт, видит картинку, кликает по ней, и попадает в интернет-магазин, где находится этот товар!

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

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

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

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

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

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

Как только я удалил данный баннер, мой блог стал загружаться в разы быстрее (сайт начал загружаться за 1.5 секунды, а не за 50!)! То есть, можно создать скриншот данного баннера, в скриншот вставить ссылочку и время его загрузки будет не несколько секунд, а доли секунды! Хотя, конечно, не так красиво. Он не будет меняться, но время загрузки сайта дороже!

г) Я думаю, что не удивлю веб. мастеров, если скажу, что часть ваших баннеров пользователи элементарно не видят. В браузерах таких людей стоит расширение «Анти-блок» или «Adguard». Данные расширения элементарно блокируют рекламу. В том числе и часть баннеров.

Если же у вас будет стоять картинка ссылка, анти блок подобный баннер воспримет воспринимать как обычное изображение, и ни какой блокировки. Например, у меня стоял определенное время баннер «живые картинки», но по нему было мало кликов. Я в начале не понимал в чем дело, потом увидел, что «Adguard» его просто блокирует.

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

как создавать живые фотографии

д) Еще одной причиной, почему лучше сделать из баннера просто картинку, я бы назвал то, что поисковики, особенно Гугл, не любят, когда много рекламы на сайте. А вашу картинку ссылку, они станут воспринимать, просто как еще одно изображение, а не как рекламу. Удобно? Думаю, да! Но, давайте вернемся к сути нашего вопроса.

Как сделать картинку ссылкой в сайдбаре

Делается это довольно просто. Я приведу конструкцию подобного изображения со ссылкой:

<a href="адрес ссылочки"><img src="адрес изображения" alt="" /></a>

В адрес ссылки вставляем ссылочку полностью, причем с http:// и прочими вещами (хотя это не всегда обязательно, но не заморачивайтесь по данному поводу). Тоже относится и к адресу изображения.

 

 

Как узнать адрес вашего изображения? Щёлкните по нему мышкой и в новом окошке вверху вы увидите вашу ссылочку. Или, войдя в админ панель, выбираем «Медиафайлы» — «Библиотека» и просматриваете все ваши изображения на сайте.

живые фотографии

Находите нужное, кликаете по ссылке вверху, и просматриваете ссылочку.

ссылка на живые фотографии

Также, хочу добавить, что, если вы желаете, чтобы ваша картиночка открывалась в новой вкладке, желательно добавить target=»_blank» в данный код.

Соответственно, наш код примет вид.

<a href="адрес ссылочки" target="_blank"><img src=" адрес изображения " alt="" /></a>

Изображения на блогах чаще всего находятся в папках /wp-content/uploads/ или /images/.

По сути, приведенный выше код является готовым для вставки в ваши сайдбары. Можно его сделать по центру, поместив между тегами <center>…</center>, или кодом <p align="center">…</p>

Как видите, всё довольно просто.

Как сделать картинку ссылкой в тексте статьи

Это относится к сайтам на движках WordPress. Здесь все также довольно просто. Картинка уже загружена на ваш сайт. Вносим её в текст. Выделяем картиночку левой кнопочкой мышки. Далее, нажимаем на знак ссылки в верху «Визуальной панели».

картинка ссылка в админке

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

Если у вас есть другие способы, как сделать картинку ссылкой в html, буду рад, если вы их напишите в комментариях. Успехов!

С уважением,    Андрей Зимин!                      23.08.2015 г.

Анекдот:

а285

 

 

 

info-kibersant.ru

Как картинку сделать ссылкой? | Создание, настройка и продвижение сайтов.

Приветствую, друзья. Сегодня на Sdelaemblog.ru поговорим, о довольно простом, но в то же время популярном вопросе. Как картинку сделать ссылкой? Бывает, возникает потребность добавить ссылку в структуру сайта, на какой-либо ресурс не в виде текстовой ссылки, а в виде изображения. Что довольно логично, так как ссылка в виде картинке выглядит более привлекательно, нежели простая текстовая ссылка. И, кроме того, она заметна посетителю гораздо лучше.

Как картинку сделать ссылкой?

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

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

HTML — код картинки.

Для вывода изображения в html-коде, можно воспользоваться предназначенным для этого тегом img. В зависимости от синтаксиса нашего кода, вывод изображения может выглядеть по-разному. Например, при использовании синтаксиса HTML, код будет выглядеть так:

<img src="URL" alt="альтернативный текст">

А при использовании синтаксиса XHTML — так:

<img src="URL" alt="альтернативный текст" />

О синтаксисе, написано подробнее в статье о DOCTYPE.

Немного подробнее о коде:

src=»URL» — Вместо URL необходимо прописать путь до картинки, которую мы будем конвертировать в ссылку.

alt=»альтернативный текст» — предназначен, для вывода текстовой информации о картинке, при отключенном в браузере показе изображений.

Кроме того, у тега img есть другие атрибуты. Основные из них:

height — высота изображения

width — ширина картинки

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

HTML — код ссылки.

Для создания ссылки, нужно использовать тег а. Данный тег имеет, как открывающий тег а, так и закрывающий. HTML — код ссылки выглядит следующим образом:

<a href="URL">Анкор (текст ссылки)</a>

Пояснения к коду:

href — атрибут href задает адрес ссылки, по которой должен быть осуществлен переход.

URL — ссылка на документ.

Анкор (текст ссылки) — Выводится в документе в виде текста ссылки.

У тега а, также есть и другие атрибуты, но на данном этапе нам могут быть интересны только пару из них:

title — заголовок ссылки. Добавляет всплывающий текст (подсказку), которая отображается, при наведении на анкор ссылки.

target — предназначен, для определения, в каком окне браузера будет открываться документ по текущей ссылке. Например, документ будет открываться в текущем окне (по умолчанию) или в новом окне.

Как картинку сделать ссылкой?

Итак, теперь мы знаем, что картинка — ссылкой, состоит из двух частей кода. Остается только их объединить воедино. Как я уже говорил выше, я буду использовать логотип социальной сети вконтакте, для вывода картинки и поставлю ссылку на свою группу вкоктакте, в которой, используя атрибут target задам открытие ссылки в новом окне.

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

<img src="/800/600/http/sdelaemblog.ru/800/600/http/sdelaemblog.ru/800/600/http/sdelaemblog.ru/wp-content/uploads/2013/06/logo_vkontakte.png" alt="Ссылка картинка на группу вконтакте">

Сразу хочу оговориться, что я загрузил картинку в библиотеку wordpress, то есть в медиафайлы. Так как я просто добавлю ссылку-картинку в статью. Но при оформлении дизайна сайта и добавления различных элементов на сайт, правильнее загружать изображения с помощью ftp-клиента в предназначенную для этого папку. В wordpress чаще всего папка находится в папке с темой и называется images или img.

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

Ссылка картинка на группу вконтакте

Как  мы можем видеть получилось, мягко говоря, не очень. Улучшить внешний вид и расположение нам помогут атрибуты, для img. А также я добавил параграф, которому присвоил атрибут выравнивания текста по середине. А значит текст и другие элементы, которые находятся между тегами p, будут выравниваться.

<p><img alt="Ссылка картинка на группу вконтакте" src="/800/600/http/sdelaemblog.ru/800/600/http/sdelaemblog.ru/800/600/http/sdelaemblog.ru/wp-content/uploads/2013/06/logo_vkontakte.png"></p>

Ссылка картинка на группу вконтакте

Немного подробнее о теге p:

Он предназначен для определения текстового абзаца. Имеет открывающий и закрывающий теги.

style — атрибут определяет стили элемента, используя правила CSS.

text-align: center; — Правило CSS. Определяет горизонтальное выравнивание элемента (тега p и всех элементов внутри). В данном случае элемент выравнивается по центру.

Итак, с картинкой разобрались. Но она до сих пор не стала ссылкой.

Для создания ссылки из картинки достаточно обернуть предыдущий код тегами а. Чтобы HTML-код выглядел так:

<a title="Ссылка на группу" href="http://vk.com/clubsdelaemblog" target="_blank"><p><img alt="Ссылка картинка на группу вконтакте" src="/800/600/http/sdelaemblog.ru/800/600/http/sdelaemblog.ru/800/600/http/sdelaemblog.ru/wp-content/uploads/2013/06/logo_vkontakte.png"></p></a>

 

Ссылка картинка на группу вконтакте

 

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

Удачи!

sdelaemblog.ru

Как сделать картинку, изображение ссылкой

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

А уж ссылка в виде картинки в сайдбаре (баннер) – это общепринятый способ для перехода на нужный адрес, к примеру, на вашу страницу захвата.

Картинка со ссылкой – обязательный атрибут продающих страниц.

Каждый переходил по линкам, спрятанным под кнопкой КУПИТЬ (кликабельная картинка).

Разберем несколько вариантов, как сделать картинку (изображение) ссылкой.

Как в картинку вставить ссылку

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

<a href="адрес ссылки"><img src="адрес картинки" alt="" /></a>

Адрес ссылки – это адрес страницы, куда переходит пользователь, чаще всего страница подписки или дендинг партнерской программы.

Где взять адрес картинки? Изображение не должно находиться на вашем компьютере. Оно должно быть размещено в интернете (в папке с медиафайлами на блоге, в корневой папке блога, на облачном сервисе, например, на Яндекс Диске). То есть изображение должно иметь свой адрес с http://.

<a href="адрес ссылки"><img src=" http://kartinka.jpg " alt="" /></a>

Если изображение находится в одной папке с файлом index.html, тогда можете написать коротко

<a href="адрес ссылки"><img src=" kartinka.jpg " alt="" /></a>

Если хотите, чтобы нужная страница открывалась в новом окне, конструкцию усложним, добавим target="_blank"

<a href="адрес ссылки" target="_blank"><img src=" kartinka.jpg " alt="" /></a>

Как в записи WordPress сделать картинку ссылкой

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

ВСТАВЬТЕ картинку в запись,

ПРАВОЙ кнопкой мыши выделите картинку,

НАЖМИТЕ знак ссылки в меню WordPress,

УКАЖИТЕ урл в появившемся окне. Это может быть партнерская ссылка, или адрес другой страницы вашего блога, или ссылка на вашу страницу захвата,

ПОСТАВЬТЕ галочку ОТКРЫВАТЬ В НОВОМ ОКНЕ.

Не забудьте нажать СОХРАНИТЬ или ОПУБЛИКОВАТЬ, или ОБНОВИТЬ.

Посмотрите, как выглядит наша картинка в режиме просмотра html. Она также имеет атрибут alt, высоту и ширину (можно изменять в просмотре html или редактировать в папке с медиафайлами), стиль alignleft (расположение слева).

 Картинка со ссылкой в сайдбаре

Чтобы сделать изображение в сайдбаре ссылкой, картинку (баннер) поместите:

В ПАПКУ с медиафайлами блога Вордпресс.  Тогда конструкция будет такая

<p align="center"><a href=" http://адрес_ссылки" target="_blank"><img src=" http://ваш_сайт.ru/images/kartinka.jpg"></a></p>

Причем, адрес картинки ищите в папке с медиафайлами.

В КОРНЕВУЮ ПАПКУ сайта public_html (через ftp клиент)

<p align="center"><a href=" http://адрес_ссылки" target="_blank"><img src=" http://ваш_сайт.ru/kartinka.jpg"></a></p>

ЗАЖМИТЕ левой клавишей мыши виджет HTML (в ранних версиях Вордпресс виджет ТЕКСТ) и перетащите его в сайдбар.

ОТКРОЙТЕ виджет, нажав на треугольник справа.

ВСТАВЬТЕ в поле виджета первую или вторую конструкцию (зависит от места нахождения картинки).

Затем нажмите СОХРАНИТЬ и перейдите на сайт, чтобы проверить результат. Привлекательные баннеры в сайдбаре - хороший способ размещения партнерских ссылок. Посмотрите, как картинку сделать ссылкой Вконтакте.

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

Метки: ведение блога

Создать сайт на WordPress

ПОХОЖИЕ СТАТЬИ:

ДРУЗЬЯ, СПАСИБО, ЧТО ПОДЕЛИЛИСЬ СТАТЬЕЙ:

moi-start.ru

Как сделать картинку в картинке ссылкой? Как вставить ссылку в картинку

Создавая баннеры и карты сайта, начинающие веб-мастера сталкиваются с такой проблемой, как вставить ссылку в картинку, сделать с ее помощью меню ярче и интереснее. Но как это осуществить? Нет ничего проще, если знать язык HTML.

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

картинка ссылка html

Где используется картинка-ссылка

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

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

Вставляем ссылку в картинку

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

Если вы знаете, как именно задается обычная ссылка при помощи HTML-разметки, то проблем у вас возникнуть не должно. Единственное отличие в том, что вместо текста ссылки задается изображение.

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

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

Далее пишем следующее: <a href="адрес ссылки">картинка</a> - специальный код. Картинка-ссылка задается именно с его помощью.

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

как вставить ссылку в картинку

Делаем меню из картинки

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

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

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

как сделать картинку в картинке ссылкой

Как сделать

Разберем чуть подробнее первый способ.

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

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

Если это ваш собственный сайт – подойдет обычная галерея или библиотека файлов, для "ВКонтакте" это может быть альбом группы или сообщества (желательно закрытый).

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

Берем код, указанный выше, и подставляем туда нужные данные. Затем заливаем картинки на сайт именно в том порядке, в котором они должны идти. При этом, если вы разрезали ее на полоски, то вам нужно каждую ссылку задавать с новой строки, а вот если вы разделили фото на квадраты, то нужно ставить в строке столько ссылок, сколько получилось квадратов.

код картинка ссылка

Делаем карту сайта

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

В первую очередь следует запомнить, что карта сайта подключается к изображению при помощи команды usemap="#map1, которая прописывается в тэге img. Поэтому, заливая картинку на сайт, обязательно допишите в тэге вторую часть - usemap="#название карты".

Дальнейшая разметка картинки на зоны, к которым прикреплены ссылки, делается при помощи парного тэга <map> </map>, который можно разместить в любом удобном для вас месте между парными тэгами <body> </body>.

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

картинка ссылка вконтакте

Параметры ссылки

Итак, у вас перед глазами готовая картинка-ссылка. HTML позволяет значительно улучшить функциональность данного изображения – выделить на ней определенную область для ссылки. Все это задается посредством специальных параметров, о которых сейчас и пойдет речь.

Поговорим немного об основных параметрах парного тэга <map>. В первую очередь это name, который равен значению usemap. Так вы обозначаете, что данная карта пишется именно для данной картинки.

Далее внутри парного тэга <map> прописывается еще один тэг - <area>, который описывает области ссылки. Он не парный и, естественно, у него есть свои параметры.

Самый первый – shape. С его помощью веб-мастер задает вид области. Это может быть:

  • окружность - circle;
  • прямоугольник - rect;
  • многоугольник - poly;
  • остальная область картинки – default.

Следующий - coords. С его помощью задаются координаты области в пикселях. Начало отсчета в данной системе координат - верхний левый угол. Вот тут-то и заключается основная проблема – не так-то легко задавать координаты посредством пикселей, особенно если отсутствует знакомство с компьютерной графикой.

Упомянем также довольно известный href, который задает адрес ссылки.

И последний параметр, который следует упомянуть, – nohref. Он показывает, что указанная область не является ссылкой.

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

html как картинку сделать ссылкой

Советы

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

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

картинка ссылка html

Выводы

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

fb.ru

Как вставить ссылку в картинку в WordPress и с помощью html

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

Как вставить ссылку в картинку с помощью WordPress

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

Меню редактировать изображение

После этого, в меню «Параметры изображения» в выпадающем меню «Ссылка» выбрать пункт «Произвольный URL» и вставить адрес на который вы хотите поставить ссылку.

Вставить ссылку в изображение в WP

Как привязать ссылку к картинке с помощью html

Прежде всего, научимся вставлять в текст просто картинку с помощью html. Для вставки картинок используется тег <img>. Рассмотрим пример:

<img src=”http://site2.ru/files/image.jpg“ />

Где:http://site2.ru/files/image.jpg — это адрес, где находится картинка, которую необходимо вставить.

Каким образом сделать эту картинку ссылкой?

Для этого вспомним, каким образом у нас вставляется ссылка. Для этого используется тег <a>. К примеру, так будет выглядеть код html для вставки ссылки на сайт www.site1.ru с анкором «так будет выглядеть ваша ссылка»:

<a href=”http://www.site1.ru“>так будет выглядеть ваша ссылка</a>

Теперь для того, чтобы превратить нашу ссылку в картинку, нужно все содержимое тега <img> вставить на место анкора в ссылке. В итоге у нас получилось:

<a href=”http://www.site1.ru“><img src=”http://site2.ru/files/image.jpg“ /></a>

Вот и все. В одном из следующих уроков мы научимся настраивать обтекание картинки текстом с помощью html и css. Читайте Лучший СЕО Блог, ставьте лайки, подписывайтесь на RSS и, разумеется, комментируйте.

Как правильно вставить ссылку в картинку в WordPress и с помощью html was last modified: Декабрь 22nd, 2016 by admin

www.bestseoblog.ru

Как сделать картинку ссылкой

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

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

kak_sdelat_kartinku_ssylkoy_как_сделать_картинку_ссылкой

Кроме того, картинка, являясь емким образом, тоже способна передавать информацию. Эмоциональную. И, в отличие от текста, она всегда остается некоторой загадкой, недосказанностью.. Мы видим образ, пару-тройку слов к нему, и вот уже хочется узнать, что за всем этим стоит. В этом секрет тизерной рекламы.

prostoj_sposob_kak_sdelat_kartinku_ssylkoj_простой_способ_как_сделать_картинку_ссылкойНаучившись превращать статичные картинки в кликабельные, вы сможете создавать свои нестандартные рассылки, RSS, красочные анонсы своих статей, необычные баннеры к своим платным/бесплатным продуктам, а также собственные изображения к партнерским продуктам, которые рекомендуете на своем сайте.

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

В разработке материала мне помог Владимир Марник — владелец сайта ХостинДО и автор проекта ПомогайБлог, подсказав, как сделать картинку ссылкой, используя возможности  Wordpress, за что я ему очень благодарна.

Вставляем в картинку ссылку

Для удобства материал разбит на две части — смотря что вы хотите сделать. Первая часть — как сделать картинку ссылкой для размещения в статье блога. То есть вы можете сделать все или некоторые изображения в статьях кликабельными.

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

Часть 1:

Как сделать картинку ссылкой для статьи

1. Создаем новую запись

Заходим в админпанель: КОНСОЛЬ → ЗАПИСИ → ДОБАВИТЬ НОВУЮ → ЗАГРУЗИТЬ/ВСТАВИТЬ.

Появится такое окно:

dobavlyaem_zapis

2. Загружаем картинку на хостинг

Нажмите кнопку ВЫБЕРИТЕ ФАЙЛ и в появившемся окне проводника выберите нужную картинку со своего компьютера. Затем нажмите ОТКРЫТЬ.  Когда файл загрузится, выберите нужный размер картинки, задайте заголовок и в нижней части окна нажмите кнопку ВСТАВИТЬ в ЗАПИСЬ.

 

3. Вставляем нужную ссылку

Когда картинка появится, щелкните по ней мышкой, чтобы выделить (картинка станет синего цвета, как на рисунке). После чего в верхней панели инструментов на вкладке  нажмите на значок «Цепь» (на рис. выделено красной стрелкой):

как сделать картинку ссылкой

Откроется новое окно — в строке URL введите адрес страницы, на которую должен переходить клик. Это может быть страница как вашего сайта, так и стороннего ресурса (например, переход по партнерской ссылке).

В графе «Открывать в новом окне» поставьте обязательно галочку и нажмите ОБНОВИТЬ.

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

Часть 2:

Как вставить картинку в сайдбар

А вот теперь научимся ставить ЛЮБУЮ картинку или баннер в сайдбар. Например, вы хотите сделать картинку-перенаправление на вашу страницу захвата, собственный инфопродукт, важную статью или на продающую страницу партнерского сайта. Или хотите поставить в сайдбар (в подвал или шапку) баннер собственного изготовления (как сделать свой баннер, можно узнать в бонусе к статье Как сделать баннер в новом окне>>).

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

В самом конце, когда нажмете ОБНОВИТЬ и картинка появится в записи, нужно перейти на вкладку HTML (красный кружок на рисунке):

kak_vstavit_kartinku_v_sajtbar

И вот он — готовый код (в синем овале на рисунке). В нем уже заложена нужная ссылка, размеры картинки и переход в новое окно. Скопируйте этот код и вставьте в виджет. Нажмите СОХРАНИТЬ в виджете и переходите на сайт. Проверьте размер картинки, корректность отображения и работает ли ссылка.

Как скрыть ссылку от индексации:

Если вы хотите скрыть ссылку от индексации (например, партнерскую), когда скопируете готовый код в виджет, сразу после ссылки <a href=»ССЫЛКА» поставьте тег rel="nofollow" — после закрывающей кавычки. И нажмите СОХРАНИТЬ в виджете.

Как уменьшить размер картинки в сайдбаре:

Если размер картинки нужно уменьшить, вернитесь в сайдбар, откройте виджет и отрегулируйте цифры так, чтобы подогнать их под размер виджета вашего блога:

 

alt=""

 

Я измеряю размер виджета не на глаз — для этого есть удобная программка FastStone Capture, а в ней линейка, позволяющая точно измерить высоту и ширину виджета, да и любого другого элемента вашего блога. Но раньше настраивала навскидку, просто экспериментируя с цифрами.

 ПОЛЕЗНЫЙ НАВЫК:

Уменьшаем вес фотографии

Как вставить в виджет два банера

Дополнительный блок по просьбам моих читателей.

Иногда возникает такая необходимость — вставить в виджет два банера по горизонтали. Для этого нужно вписать сгенерированный выше код в дополнительные теги:

<table><tr><td>КОД БАННЕРА №1</td><td>КОД БАННЕРА №2</td></tr></table>

Чтобы картинки встали тютелька в тютельку, нужно уменьшить размер, как описано параграфом выше.

Если ниже нужно расположить ещу пару, то можно создать еще один виджет. Таким образом можно создавать бесчисленное множество групп банеров.

И не забывайте закрывать от индексации, если ссылки партнерские, особенно на главной странице сайта. Такие уж у нас поисковики, что в открытую работать — в бан можно загреметь 🙂

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

Поделитесь пожалуйста, если понравилось:Возможно вам будет интересно еще узнать:

opartnerke.ru

Как добавить картинку через CSS и сделать её ссылкой?

Делаем картинку, добавленную через CSS, ссылкой

В данной статье мы рассмотрим то, каким образом можно добавить в дизайн своего сайта картинку средствами CSS и сделать картинку кликабельной, то есть поставить на нее ссылку. Для начала я хотел бы Вам показать как легко и просто можно добавить картинку и сделать её ссылкой. Для этого мы используем средства HTML:

<a href="about-windows.ru"><img scr="/image.png"></a>

Как видите, тут мы даже не задействуем CSS. Здесь представлен чистый HTML. Добавление картинки средствами CSS может быть актуальным, например, при использовании CSS спрайтов на Вашем сайте. Про CSS спрайты я напишу чуть позже. А теперь мы перейдем непосредственно к нашей теме.

Как средствами CSS добавить картинку в дизайн сайта?

.logo { top:0; display:block; text-align: left; float: left; margin-right: 48px; width: 114px; height: 59px; background: url(/img/logo.png) no-repeat;

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

  1. Я не больно хорошо знаю CSS.
  2. Редактирование файлов CSS достаточно не сложное занятие, так как все поля достаточно красноречиво говорят о своей функциональности.
  3. Эта статья не предназначена для верстальщиков(тем более это они знают на зубок). Статья представлена для владельцев сайтов, которые используют общедоступные CMS и иногда влезают в него для внесения несущественных изменений, а про редактирование файлов CSS можете почитать во 2-ом пункте.

Надеюсь представленный мною вариант довольно отчетливо даёт понять как необходимо добавлять картинку в дизайн сайта. Уточню только пару моментов:

  1. Класс logo должен быть описан в файле формата.css.
  2. Данный файл должен быть загружен страницей. Для этого можно использовать следующий код: <link type="text/css" rel="StyleSheet" href="about-windows.ru/style.css" />

    Можете почитать подробнее про способы внедрения css-стиля в HTML-код страницы.

  3. logo.png — это то самое изображение, которое мы хотим добавить в дизайн нашего сайта. Поэтому сориентируйтесь и измените путь так, как Вам нужно.

Как сделать изображение ссылкой?

Мы напрямую подошли к главному моменту данной темы. Теперь у нас уже есть необходимый нам css класс, в котором загружается необходимое нам изображение. К сожалению средствами CSS нельзя добавить ссылку для изображения, это прерогатива HTML. А это значит что в коде страницы мы должны добавить следующий код:

<div> <a href="about-windows.ru"></a> </div>

Что тут нужно отметить несколько моментов:

  1. Мы в блоке div подключаем CSS класс, в котором указано месторасположение картинки и сама картинка.
  2. Далее идет стандартная ссылка: <a href="ссылка">Анкор ссылки</a>
  3. Как Вы можете заметить, у нас нет анкора ссылки. Анкор ссылки — это текст, под которой скрыта ссылка. Его отсутствие это нормально.
  4. И самый важный момент состоит в добавлении необходимого стиля для ссылки, чтобы для перехода по ссылке можно было бы нажать на всю ширину картинки.

Вот такими несложными действиями можно добавить картинку средствами CSS, а потом навесить на неё ссылку, уже средствами HTML.

about-windows.ru