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

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

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

 

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

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

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

 

1. Для создания ссылки в HTML используется тег <a>. Атрибут <href> данного тега - задает путь к документу, на который нужно перейти.

<a href="/URL-адрес ссылки" >Название ссылки</a>

 

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

<img src="/Путь к картинке" >

 

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

<a href="/URL-адрес ссылки" ><img src="/Путь к картинке" ></a>

 

 Пример:

<a href="/kak-vstavit-kartinku-v-statyu-joomla.html" target="_blank" title="Как вставить картинку в статью Joomla"><img src="/images/joomla/26.gif" border="0" align="left" />

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

 

 

Путь к картинке может быть относительным адресом или URL-адресом.
Если картинка находится в папке на вашем сайте, нужно указывать относительный адрес, например:
<img src="/images/joomla/26.gif".
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 .

Комментарии   

 
-1 #50 eslo 17.07.2016 08:47
Интересная статья
 
 
0 #49 admin 25.04.2016 17:21
Цитирую Сергей1980:
Здравствуйте! Я сделал ссылку на "гифке" всё получилось, но смотреть могу только я. Я не могу выложить в интернет сделанные "гифки" с ссылками. Как мне их выложить в интернет?

Уточните, что значит "не могу выложить в Интернет", у вас сайт на локальном сервере?
 
 
0 #48 Сергей1980 24.04.2016 13:05
Здравствуйте! Я сделал ссылку на "гифке" всё получилось, но смотреть могу только я. Я не могу выложить в интернет сделанные "гифки" с ссылками. Как мне их выложить в интернет?
 
 
0 #47 я 28.01.2016 13:41
А почему вставляешь ссылку а потом нажимаешь на картинку а она просто увеличивается.
 
 
+2 #46 Арнольд 30.11.2015 16:28
Спасибо за помощь! Теперь мои картинки - ссылки :lol:
 
 
+1 #45 azaza 23.11.2015 17:18
:lol: :lol: :lol: спасибо за информацию
 
 
+1 #44 Daimon 22.11.2015 09:46
Скажите пожалуйста, что не так делаю
 
 
0 #43 admin 24.08.2015 22:48
Цитирую Андрей Зимин:
Добрый день, а в Вордпресс подобным образом можно сделать?

Да. Можно отредактировать html-код материала или с помощью стандартных возможностей движка.
 
 
+1 #42 Андрей Зимин 20.08.2015 23:33
Добрый день, а в Вордпресс подобным образом можно сделать?
 
 
0 #41 Cyrus 26.07.2015 19:57
Благодарю, отличная статья, очень помогла дилетанту! :-)
 

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