Заработок в интернет

Создание, оптимизация, продвижение сайта и заработок на его основе

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

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

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

В прошлых статьях я останавливался на размещении баннеров на блоге 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>

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



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


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

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

Успехов вам!

  1. Марина:

    Большое спасибо, настоящий друг!!! Вы меня очень выручили и сэкономили массу мего сегодняшнего День рожденьевского времени!!! Да здравствуют неравнодушные и способные поделиться!!!!) Всех благ и радости во всём Вам, милый друг!) Марина, ставшая сегодня на год взрослее и ссылку умнее!!!)

    Опубликовано: 16 Январь 2013 в 07:56

  2. Сергей Егерев:

    @ Марина:
    Да здравствуют те, которые могут оценить скромный труд вебмастера! :) С днем рождения, счастья, здоровья, успехов во всем! И заходите в гости почаще. :)

    Опубликовано: 16 Январь 2013 в 09:04

  3. Марина:

    @ Сергей Егерев:
    Доброй ночи, Серёжа! Спасибо за поздравление!) Очень приятно!) Я теперь Ваша постоянная поклонница!) Не «вылезаю))) из Ваших советов!!!) Я-новобранец в блоге, но уже хочу пригласить друзей к общению в дневнике, думаю, Ваших почитателей станет значительно больше!) Поэтому, не оставляйте нас без спасательного круга полезных советов в Вашем блоге. Очень доступно, наглядно, понятно. Берегите себя, без Вас нам никак!)

    Опубликовано: 26 Январь 2013 в 00:35

  4. Сергей Егерев:

    @ Марина:
    Спасибо за добрые слова, гостям всегда рады :)

    Опубликовано: 26 Январь 2013 в 09:47

  5. Михаил:

    Спасибо огромное за статью! Очень помогли и сэкономили кучу времени!

    Опубликовано: 15 Декабрь 2013 в 17:05

  6. Сергей Егерев:

    @ Михаил:
    Всегда пожалуйста, заходите почаще :)

    Опубликовано: 15 Декабрь 2013 в 17:29

  7. Виктор:

    Я ничего не понял. Если мы имеем одну картинку, то почему в коде фигурируют 4 картинки, а если мы имеем 4 картинки — одна фон и три кнопки, то как — это сделать?

    Опубликовано: 11 Ноябрь 2014 в 14:45

  8. Сергей Егерев:

    @ Виктор:
    Вроде все понятно, почти разжевал. Четыре картинки загружаем на хостинг, это в моем случае. Одна картинка фоновое изображение, а три остальные — кнопки ссылки.

    Опубликовано: 11 Ноябрь 2014 в 18:54

Оставить комментарий

Switch to Dark fonts Switch to Light fonts