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


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

как сделать картинку ссылкойПриветствую вас уважаемые читатели!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

<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>

<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>

<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>

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


В данной статье мы рассмотрели, как сделать картинку ссылкой, а также рассмотрели создание фоновой картинки с несколькими ссылками.


Также хочу вам порекомендовать шпаргалку по HTML (htmlka.com выделите мышкой и скопируйте в строку браузера), где вы почерпнете много полезной для себя информации.

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

Успехов вам!

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

Тоже читают:



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

Поздравления с шестилетней годовщиной свадьбы

Как сделать цветы из бумаги для фоторамки

Шьем платья и туники своими руками

Плакат на юбилей 50 лет женщине своими руками