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

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