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

Приветствую вас уважаемые читатели!

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

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

В прошлых статьях я останавливался на размещении баннеров на блоге wordpress:

• как вставить баннер на блог,
• как вставить баннер в шапку блога wordpress,
• как самому изготовить баннер.

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

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

Итак, я думаю, что вы сделаете правильные выводы и «очертя голову», непременно кинетесь изучать язык html, не сегодня, так завтра, а может на следующей неделе. А пока продолжим.

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

Допустим, у меня есть картинка, скачанная на компьютер из интернета. Я выбрал эту.

Я хочу сделать ее ссылкой на свою главную страницу блога. Для этого нужно применить следующий код:

<a href= «АДРЕС СТРАНИЦЫ»><img src= «АДРЕС КАРТИНКИ»></a>

Где адрес страницы – это URL адреса страницы, куда ведет ссылка.

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

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

1

<a href="АДРЕС СТРАНИЦЫ" target="_blank"><img src="АДРЕС КАРТИНКИ"/></a>

В моем случае код будет выглядеть вот так:

2

<a href="http://egofilin.ru/" target="_blank"><img src="http://egofilin.ru/wp-content/uploads/2012/05/delaem-kartinku-ssylkoj.jpg"></a>

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

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

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

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

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

В данном случае используется таблица, и кнопки используются как ячейки данной таблицы.

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

Конечно же, они должны быть сопоставимых размеров в пикселях, чтобы смотрелись на фоновом рисунке. Если вы не знаете, как определять размеры в пикселях, то откройте картинку в Paint, вкладку Рисунок – Атрибуты и там увидите размеры вашей картинки.

Теперь нам нужно использовать код html вот такого вида:

<table background="Адрес фонового рисунка на хостинге" width="ваш размер" height="ваш размер" border="0" cellspacing="0" cellpadding="0" alt=""><tr><td align="center"><a href="Адрес, куда перенаправляет 1 ссылка" target="_blank"><img src="Адрес 1 рисунка на хостинге" title=" Заголовок картинки" alt="" border="0" /></a></td></tr><tr><td align="center"><a href=" Адрес, куда перенаправляет 2 ссылка " target="_blank"><img src=" Адрес 2 рисунка на хостинге " title=" Заголовок картинки " alt="" border="0" /></a></td></tr><tr><td align="center"><a href=" Адрес, куда перенаправляет 3 ссылка " target="_blank"><img src=" Адрес 3 рисунка на хостинге " title="Заголовок картинки" alt="" border="0" /></a></td></tr></table>

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

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

<table background="http://egofilin.ru/wp-content/uploads/2012/05/proba-risunok1.jpg" width="256" height="394" border="0" cellspacing="20" cellpadding="0" alt=""><tr><td align="center"><a href="http://feeds.feedburner.com/egofilinru" target="_blank"><img src="http://egofilin.ru/wp-content/uploads/2012/05/proba-risunok2.jpg" title="Подписка на обновления" alt="" border="0" /></a></td></tr><tr><td align="center"><a href="http://egofilin.ru/" target="_blank"><img src="http://egofilin.ru/wp-content/uploads/2012/05/proba-risunok3.jpg" title="Главная страница" alt="" border="0" /></a></td></tr><tr><td align="center"><a href="http://twitter.com/egskorn" target="_blank"><img src="http://egofilin.ru/wp-content/uploads/2012/05/proba-risunok4.jpg" title="Я в Твиттере" alt="" border="0" /></a></td></tr></table>

А вот как выглядит уже готовый фоновый рисунок с графическими кнопками-ссылками.

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

Успехов вам!