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

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

Часто веб-мастера сталкиваются с необходимостью в качестве ссылки использовать картинку. В данной статье рассмотрим, как сделать картинку ссылкой в 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 .

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

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

Тоже читают:



Смешные поздравления с днем рождения в картинках другу

Как сделать утяжелители для скатерти

Вышивка утро в сосновом бору панна

Создание своей схемы вышивки по фотографии

Поздравление пожилой женщине с днем рождения с юмором