Как сделать картинку ссылкой в HTML, Вконтакте, на форуме и с помощью CSS

Как сделать картинку ссылкой в HTML, Вконтакте, на форуме и с помощью CSS

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

Содержание

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

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

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

Для формирования ссылок в HTML используется простой механизм. Существует специальный тег , обозначающий ссылку. Объекты, находящиеся внутри него являются ссылками. Обязательным атрибутом тега является параметр href, оперделяющий целевую страницу, на которую ссылка будет вести.

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

Результирующий код для вставки изображения-ссылки выглядит вот так:

По тексту понятно, что kuda-vedet-ssylka – это адрес целевой страницы, а gde-lezhit-kartinka/kartinka.png – это путь к файлу изображения и его название.

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

А тег часто содержит alt=”альтернативный текст, показываемый, если картинка не загрузилась”, title=”название изображения”, height=”указывается высота в пикселях”, w >

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

А вот так он работает:

Картинка-ссылка на CSS

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

Для того, чтобы сделать картинку-ссылку на CSS нам нужно пройти 2 шага:

1. Создаем класс объекта и прописываем его в таблице стилей (файл style.css).

Общий код выглядит вот так:

В данном случае link-img – это класс объекта, width и height – размер изображения, background – фон объекта (в качестве фона мы устанавливаем изображение).

2. Вставляем в нужное место сайта html ссылку с атрибутом, указывающим, что она относится к классу link-img. Для этого используется тот же тег , что и в предыдущем варианте. Код выглядит вот так:

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

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

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

Шаг 1. Готовим картинку

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

Поддерживаемые форматы – jpg, gif и png.

Шаг 2. Вставляем ссылку в ВК

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

Шаг 3. Вставляем изображение

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

Для этого выбираем кнопку «Выбрать свою иллюстрацию» (фотоаппарат).

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

После выбора, будет возможность слегка подкорректировать – обрезать лишнее и повернуть. Жмем «Сохранить изменения».

После этого формат публикуемой новости изменится. Если вы все сделали верно, то картинка займет всю ширину сообщения и станет ссылкой. Нажимаете «Отправить» и наслаждаетесь результатом.

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

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

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

Интересно, что все эти BB-коды в конечном итоге переводятся в HTML, так как браузеры их читать не умеют.

Изображение в BB-коде указывается вот так:

Указывается ссылка на картинку.

А ссылки формируются тегами [url] [/url]. И для создания ссылки-картинки на форуме надо завернуть одну конструкцию в другую, получится так:

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

Визуальные редакторы

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

Для того, чтобы сделать изображение ссылкой в графическом интерфейсе необходимо выполнить 2 действия:

1. Вставить изображение, вот такими кнопками (пример с форумом был выше, тут я показываю WordPress):

Там надо будет либо добавить ссылку на картинку в интернете или загрузить с компьютера (возможность загрузки есть не всегда).

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

На этом все. Желаю удачи. Не забывайте оформить подписку на новые статьи.

biznessystem.ru

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

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

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

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

• bitly.com Заходим на данный сайт, копируем ссылку своей группы или сообщества, и вставляем её.
• Группа. Зайдите в свою группу, создайте запись и вставьте в неё ссылку.
  
• Фотография. После этого нажмите на иконку в виде маленького фотоаппарата, и нажмите на «Выбрать изображение/иллюстрацию».
• Изображение. Перед тем как выбрать фотографию, сначала точно определитесь с изображением, и только после этого загружайте фото.
  
• Выбор. Выберите нужную вам область изображение и нажмите на «Сохранить».

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

Как сделать картинку ссылкой «ВКонтакте» в группе: вариант второй

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

• Перейдите по данной ссылке и введите >
• Дальше нажмите на значек камеры и выберите фото которое вы хотите сделать ссылкой
  
• Что бы добавить сслыку на группу в вк или сайт к фото или картинке достаточно просто нажать на нее и ввести информацию
  
• После этого нажмите сохранить
• Теперь если зайти в просмотр вы увидете свою ссылку
  

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

mir-vkontakte.ru

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

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

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

Давайте рассматривать все подробнее.

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

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

Зайдите в свой аккаунт в вк и нажмите на поле «Что у Вас нового?».

Дальше откройте в браузере нужную страницу в Интернете и скопируйте из адресной строки урл.

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

Откроется вот такое окошко. В нем нажмите на кнопку «Выбрать файл», чтобы добавить изображение. Обратите внимание, что его размер должен быть больше чем 537х240 px, иначе появится сообщение с предупреждением.

Через Проводник найдите нужную картинку на компьютере, выделите ее мышкой и нажмите «Открыть».

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

Удалите сам урл из поля для ввода текста, чтобы она не отображалась в записи. Нажмите «Отправить».

Выбранная картинка будет активной ссылкой, кликнув по которой, пользователь перейдет на указанный Вами сайт в Интернете. Опубликованную заметку увидят все Ваши друзья у себя в Новостях.

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

На вкладке «Поделиться» отметьте маркером подходящий вариант и нажмите «Поделиться записью».

Если выберите «Отправить личным сообщением», тогда нужно указать пользователей из своего списка друзей, кому оно будет отправлено. Можно выбрать одного или нескольких человек.

Если хотите добавить сделанную запись на стену в группу, отметьте маркером «Подписчики сообщества» и выберите свою группу из списка.

Вот так выглядит запись с картинкой-ссылкой, которой Вы поделились, на стене группы.

Делаем кликабельное изображение, используя стандартную ссылку

Сделать картинку кликабильной Вконтакте можно и немного другим способом. Для этого нам понадобится урл следующего вида:

https://vk.com/share.php?url=Ссылка&title=Заголовок&image=Ссылка на картинку&noparse=true&description=Описание

Ее нужно вставить в адресную строку браузера (как показано на картинке ниже), заменив слова «Ссылка», «Заголовок», «Ссылка на картинку», «Описание» своими данными.

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

Для примера, сошлюсь на поисковую страницу Яндекса. Открываю ее в браузере, копирую все из адресной строки и вставляю вместо слова «Ссылка».

Дальше идет «Заголовок». Это подпись, которая будет отображаться непосредственно возле картинки или под ней. Я так и напишу: Стартовая страница поиска Яндекс. Если хотите, можете сделать картинку без заголовка – удалите слово «Заголовок» и ничего вместо него не пишите.

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

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

Слово «Описание» можете или заменить, добавив свой текст, или ничего не писать, как и в случае с заголовком. Я добавлю текст: Нажмите на картинку.

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

https://vk.com/share.php?url=https://yandex.ua/&title=Стартовая страница поиска Яндекс&image=https://yandex.ua/images/search?text=яндекс&img_url=https%3A%2F%2Fchelovek-zakon.ru%2Fwp-content%2Fuploads%2F2016%2F04%2FDochka_yandeksa_v_SHvejtsarii.gif&pos=0&rpt=simage&noparse=true&description=Нажмите на картинку.

Вставляйте сделанный урл в адресную строку браузера и жмите «Enter». Откроется страница, как показано на скриншоте ниже. Здесь маркером нужно выбрать, как опубликовать запись: на своей странице, в своей группе, или отправить личным сообщением. После этого нажмите на кнопку «Отправить».

О том, что запись будет добавлена, свидетельствует следующее окно.

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

Дальше удалите весь текст из соответствующего поля, в моем случае это: Стартовая страница поиска Яндекс, и нажмите «Сохранить».

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

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

inetfishki.ru

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

Первый делом мы идем в группу, в которой хотим создать новую Wiki-страницу, и оформить ее (см. как красиво оформить группу в вконтакте и сделать меню). Для этого используйте следующую ссылку:

Где вместо первых трех звездочек, мы вставляем id группы (см. как получить id группы вконтакте). В конце — пишем заголовок для страницы. Пример:

Теперь давайте вставим сюда картинку (см. как добавить фото в альбом в контакте), и сделаем так, чтобы она была ссылкой на внешний сайт.

Переходим в режим Wiki разметки. Для этого нажимаем на соответствующий значок, справа наверху.

Теперь мы используем вот такой код.

После текста «Photo» , нужно вставить номер фотографии. Узнать его можно во время ее просмотра, скопировав текст из адресной строки браузера.

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

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

При этом, если вы щелкните на картинку, то перейдете на сайт, который указали.

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

Выбираем или загружаем нужную фотографию. Когда она будет добавлена на страницу, щелкаем по ней курсором мыши. И заполняем нужные поля, в появившейся форме. Не забываем в поле «Ссылка» , указать адрес нужного сайта.

Когда закончите, нажимайте кнопку «Изменить» .

Заключение

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

Вам помогла эта информация? Удалось решить возникший вопрос?

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

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

vksetup.ru