Как добавить ссылку на картинку, если она находится в одной из колонок?

Как добавить ссылку на картинку, если она находится в одной из колонок?

Last edited 29 July 2016 by nathan_afk

  • 1
  • 2
  • Next

Уточните, пожалуйста, что вы хотели бы сделать: в теме есть Columns, в одной из них картинка, а в другом месте текст со ссылкой, открывающей эту картинку? Или как-то по-другому?

Sincerely,
Nettie,
BillionDigital Team

Здравствуйте, Уточните, пожалуйста, что вы хотели бы сделать: в теме есть Columns, в одной из них картинка, а в другом месте текст со ссылкой, открывающей эту картинку? Или как-то по-другому? Sincerely, Nettie, BillionDigital Team

Допустим у меня есть слайд шоу и на каждый слайд мне нужно к фото прикрепить ссылку, что бы она вела на определенную страницу, как это можн

Допустим у меня есть слайд шоу и на каждый слайд мне нужно к фото прикрепить ссылку, что бы она вела на определенную страницу, как это можн!п34ив.png!о сделать?

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

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

Можно скриншотами показать?я не могу понять

Можно скриншотами показать?я не могу понять

slide-image.png

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

Прикрепила скрин: !slide-image.png! В слайдер добавляете Image контрол и в его настройках вводите ссылку. Сам контрол можно сделать по размеру слайда. Sincerely, Hella

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

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

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

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

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

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

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

slide-link.png

Один момент, вы в начале писали про колонки, если вы имеете ввиду целый слайд, то есть опция добавления ссылки на весь слайд. !slide-link.png! Sincerely, Hella

Здравствуйте а подскажите как сделать так чтоб ссылка вела на другой сайт или ресурс при клике на картинку !

Здравствуйте а подскажите как сделать так чтоб ссылка вела на другой сайт или ресурс при клике на картинку !

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

Добрый день, Точно так же, вводите адрес нужного сайта. Для того, чтобы открыть ссылку в новом окне, в поле target выберете опцию Blank. Sincerely, Hella

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

Добрый день! Подскажите пожалуйста такой вопрос. Сделал изображение как ссылку на другую страницу сайта. Но когда нажимаешь на нее появляется само изображение, а когда открываешь по правой кнопке «открыть в новом окне» то открывается нужная страница. http://archi.smartech.pro/napolnye-pokrytiya/

У вас активирована опция Lightbox на этом темплейте. Вам нужно открыть тему в Themler, перейти на страницу с картинкой, затем кликнуть на область контента и выбрать настройки контрола Posts >> Post Content >> и там выключить Lightbox. Как на скриншоте:

lightbox-off-1.png

Добрый день, У вас активирована опция Lightbox на этом темплейте. Вам нужно открыть тему в Themler, перейти на страницу с картинкой, затем кликнуть на область контента и выбрать настройки контрола Posts >> Post Content >> и там выключить Lightbox. Как на скриншоте: !lightbox-off-1.png! Sincerely, Hella

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

И можно и сделать та что бы весь объект «Изображение+текст» были единой ссылой, а не только изображение и текст отдельными ссылами.
Заранее спасибо.

А можно объяснить, за что отвечает данная функция. Как только я ее отключил, все колонки и секции на странице пропали, а их содержимое как-будто прилипло и больше не дает его редактировать и даже нажать на него. Включение это функции обратно ничего не вернуло. Так что хотелось бы каких-то подробностей. И можно и сделать та что бы весь объект «Изображение+текст» были единой ссылой, а не только изображение и текст отдельными ссылами. Заранее спасибо.

Last edited 26 October 2017 by ditol

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

Нет, опции сделать кликабельным весь контрол Image+text нет. Можно попробовать расположить на нем HTML контрол с растянутой по высоте и ширине ссылкой.

Thank you,
Olivia

Hi, Какая именно функция? Если вы имеете ввиду «Image lightbox» то она включает и отключает лайтбокс картинок, о котором вы писали в предыдущем посте. С колонками она не связана. Скорее всего в вашем случае проблема более глобальная и ее нужно смотреть отдельно. Создайте, пожалуйста, новый приватный топик и прикрепите тему, на которой можно повторить проблему. Нет, опции сделать кликабельным весь контрол Image+text нет. Можно попробовать расположить на нем HTML контрол с растянутой по высоте и ширине ссылкой. Thank you, Olivia

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

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

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

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

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

В целом, кликабельное изображение состоит из двух частей:

  1. Само изображение, которое можно создать посредством нескольких методов (которые мы также опишем на этой странице).
  2. Ссылка на страницу, на которую люди будут перенаправлены при клике по изображению.

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

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

Предлагаю вам код для создания изображения:

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

center «> — выравнивает изображение по центру страницы, для выравнивания по левой стороне « center » заменяем на « left «, а для правой заменяем на « right»

http://web-profy.com/wp-content/uploads/2012/11/click-me.jpg » /> Здесь указан путь к изображению, то есть где оно располагается, в вашем случае впишите туда адрес к нужному изображению.

Вы ожидали что будет сложнее? Все просто) Еще вас может заинтересовать статья как сделать ссылкой флеш-баннер.

Дизайн и разработка сайта

Доброго времени суток. ??

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

Как задать картинку для сайта при публикации в соцсетях или мессенджерах.

Вывод картинки, текста и описания для сайта, осуществляется благодаря разметке Open Graph. Она как раз и создана для того, чтобы вы видели картинку, название и краткое описание для ссылки, вместо обычного УРЛ. Ведь так же красивее, понятнее и намного эффективнее. Но от куда берется эта разметка Open Graph, если вы ее не добавляли на сайт?

Если вы используете какую-то систему для управления сайтом, в народе «Движок», то скорее всего вы устанавливаете плагины, модули, дополнения и тд. У каждого движка свои названия этих дополнительных опций. Суть в том, что некоторые из них, что рассчитаны на работу в СЕО области и там или автоматически определяются параметры для вывода Open Graph или же вы прописываете, даже не задумываясь для чего. Например, у WordPress, в этом вопросе самый популярный плагин — SEO by Yoast. Так же, часто все формируется автоматически, даже если нет ни плагинов ни разметки. Соцсети и мессенджеры просто берут первую попавшуюся картинку с сайта, тайтл и какой-то текст или описание страницы. Хорошо, если картинку угадает или хотя бы лого поставит, но иногда так бывает, что ставит что попало. Например, иконку какую-то или вообще фон сайта. Согласитесь, это не всегда может понравится.

Чтобы все отображалось корректно, советую на своих системах установить соответствующие плагины, с помощью которых будет произведена настройка разметки Open Graph. Если у вас самописный сайт или лендинг, то можете установить стандартные настройки для главной страницы. Чтобы это сделать, можете добавить некоторые теги в шапку страницы.

Далее нужно каждому МЕТА-тегу заполнить параметр content=»», чтобы правильно это сделать, распишу подробнее, за что отвечает каждый:

  • og:title — Заглавие страницы, он же тайтл. Можете скопировать из тега . .
  • og:site_name — Название сайта.
  • og:url — Ссылка страницы, где вы добавляете этот код. Если это лендинг и у него одна страница, то это просто ссылка на главную сайта. если сайт самописный и у него много страниц, то вам придется для каждой указать свой тег, со своей ссылкой.
  • og:description — Описание страницы. Можете скопировать из тега description для страницы, на которую добавляете теги.
  • og:image — Ссылка на картинку, что характеризует страницу. Если это тот же лендинг, то можете указать ссылку на лого сайта, или нарисовать конкретную картинку для этих целей. На сайте, этой картонкой выступает изображение для статей и тд.

Готовый вариант может быть примерно таким:

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

Недавно была написана новая статья об Open Graph с инструкцией для WordPress — Как подключить Open Graph к WordPress

На этом все, спасибо за внимание. ??

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

Часто веб-мастера сталкиваются с необходимостью в качестве ссылки использовать картинку. В данной статье рассмотрим, как сделать картинку ссылкой в HTML и как сделать картинку ссылкой в Joomla.

Несмотря на то, что CMS Joomla упрощает работу и не требует особых знаний HTML и CSS, думаю, что осваивая приемы работы веб-мастера, нужно обязательно изучать HTML и CSS. Поэтому в первой части статьи я покажу, как сделать картинку ссылкой в HTML, если вам это не интересно, можете сразу перейти ко второй части статьи, и почитать, как сделать картинку ссылкой в Joomla.

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

В данном примере рассмотрим, как можно сделать картинку ссылкой, редактируя html-код материала. Загрузите нужную картинку в папку для изображений на сервер и откройте статью для редактирования в HTML. В Joomla нужно кликнуть мышкой по кнопке «Редактировать HTML-код».

И так, начнем учиться делать картинку ссылкой в HTML.

2. Для вывода изображения в HTML используется тег . Атрибут данного тега — задает путь к картинке.

3. Для того, чтобы картинка стала ссылкой, объединяем теги:

Для примера, кликнув по картинке ниже, вы попадете на страницу сайта со статьей «Как вставить картинку в статью Joomla»

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

Дополнительно можно использовать:

target=»_blank» — ссылка должна открываться в новом окне;

align=»left» — выравниваем картинку по левому краю;

alt=»Описание картинки» — альтернативный текст для картинки (выводится вместо картинки, если в браузере отключена загрузка изображений);

title=»Текст при наведении» — текст, который будет выводится при наведении курсора на картинку;

width=»200″ — ширина картинки;

height=»100″ — высота картинки;

border=»0″ — рамка вокруг картинки (по умолчанию вокруг картинки появляется рамка в 1 px, для того, чтобы убрать рамку, нужно поставить значение «0»).

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

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

1. Загрузите нужную картинку в папку на сервер, где у вас хранятся изображения.

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

3. Кликните по картинке мышью (вокруг картинки образуется рамка). Затем кликните по кнопке «Вставить/Редактировать ссылку» в верхнем меню редактора (смотрите рис. сверху). Заполните поля: адрес ссылки — скопируйте адрес страницы, на которую будет вести ссылка;
цель — открыть в новом окне (_blank);
название — укажите название (будет видно, при наведении курсором на картинку)

4. Если все сделано правильно, кликнув по изображению, вы попадете на указанную в ссылке страницу. Для примера, кликнув по картинке ниже, вы попадете на страницу сайта со статьей «Как вставить картинку в статью Joomla»

Таким образом, вы можете сделать картинку ссылкой или с помощью кнопки в редакторе или редактируя html-код материала. Далее читайте о выводе картинки в модальном (всплывающем) окне в lightbox .

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

Сгенерированный код, вставьте в нужном месте сайта, и баннер будет работать.

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

Создать баннер самостоятельно

Давай те же разберёмся для начала, что такое баннер?

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

Ничего сложного, тег а — это тег ссылки, href — атрибут, в который мы вставляем ссылку на нужный нам материал.

Приведу пример: в качестве ссылки возьму адрес своей главной страницы

И мы получим такую ссылку: Главная страница

В качестве текста ссылки, можно использовать что угодно, в нашем случае нужно в качестве ссылке сделать картинку

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

Как вы видите, ничего сложного, img — тег картинки, а src — путь до картинки, я в качестве примера взял логотип сайта, получим следующее:

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

Стираем текст ссылки, в моём примере: «Главная страница», и вставим вместо неё код для картинки (2 строка), получим следующее:

И в результате на странице, мы увидим нашу картинку-ссылку, я вставлю код выше и получу:

Как вы видите картинка стала ссылкой, думаю я понятно все объяснил, спасибо.

Как разместить ссылку на сайт в картинке