Html как сделать картинку ссылкой: Как сделать картинку ссылкой в html два простых способа.

Задавались ли вы вопросом о том, как сделать картинки на вашем сайте кликабельными? В большинстве случаев, это подразумевает под собой HTML, и с помощью нашего руководства вы научитесь делать так, чтобы на изображения на вашем блоге, сайте или странице можно было кликать на картинку.

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

Используем HTML для того, чтобы сделать изображение кликабельным

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

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

В целом, кликабельное изображение состоит из двух частей:

1. Само изображение, которое можно создать посредством нескольких методов (которые мы также опишем на этой странице).
2. Ссылка на страницу, на которую люди будут перенаправлены при клике по изображению.

Давайте рассмотрим очень простой способ создания картинки-ссылки. Это изображение, которое переместит вас на страницу, на которой представлено изображение. В этом примере вы будете перемещены на одну из страниц.

Предлагаю вам код для создания изображения:

<p><a href="http://web-profy.com"><img src="http://web-profy.com/wp-content/uploads/2012/11/click-me.jpg" />
Сделать картинку ссылкой</a></p>

Код состоит из форматирования изображения и текста, их центрирования, а также из строки текста; ссылка на страницу, на которую я хочу переместить людей, а также исходный код изображения. То есть:

<p style=»text-align:center«> — выравнивает изображение по центру страницы,  для выравнивания по левой стороне «center» заменяем на «left«, а для правой заменяем на «right»

<a href=»http://web-profy.com«> ссылка на которую будет направлен пользователь кликнувший по картинке, в примере домен этого блога, вы можете его заменить на любой другой адрес.

<img src=»http://web-profy.com/wp-content/uploads/2012/11/click-me.jpg» /> Здесь указан путь к изображению, то есть где оно располагается, в вашем случае впишите туда адрес к нужному изображению.

Вы ожидали что будет сложнее? Все просто) Еще вас может заинтересовать статья как сделать ссылкой флеш-баннер.

Алексей Повловский

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

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

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

Как сделать ссылку

Чтобы сделать ссылку нужно поместить ее в HTML конструкцию. В HTML ссылка обозначается тегом a, а атрибутом этого тега задается путь к странице, на которую нужно перейти.
В итоге получается простейшая HTML конструкция.Этот пример ссылки берем за основу.

<a href="здесь ссылка на ресурс">здесь название, кот. будет видно</a>

Вот пример ссылки на мой сайт :

<a href="http://filwebs.ru">Блокнот Сайтостроителя</a>

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

<a href="здесь ссылка на ресурс">здесь название</a>

(ссылка открывает страницу в другом окне браузера).

Также к ссылке можно добавить описание, которое появляется при наведении курсора на ссылку. Вывод описания осуществляется тайтлом title="тут описание"

<a title="вспл. подсказка" href="здесь ссылка на ресурс">здесь название</a>

Атрибут title="" можно применять как к ссылке, так и к картинке.

— Если навести курсор на эту ссылку, то можно увидеть результат.

Украшаем ссылки

Чтобы сделать ссылку закрытой от индексации в Google, нужно добавить атрибут rel="nofollow",

<a title="вспл. подсказка" href="здесь ссылка на ресурс" rel="nofollow">здесь название</a>

К ссылкам применяются различные атрибуты, классы, id, для этого существует много справочной литературы.

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

Так, ссылку HTML мы сформировали, теперь чтобы сделать картинку ссылкой нам нужно просто добавить ее к HTML коду, который выводит визуально картинку на экран. HTML код вывода картинки имеет такой вид:

<img src="/Путь к картинке" />

К картинке нужно добавит атрибут alt="" который выводит на экран альтернативный текст вместо картинки, если она по каким то причинам не подгрузилась. Кстати, очень полезный атрибут, об этом чуть ниже. Также если вы не добавите к картинке этот атрибут, то W3C валидатор посчитает это ошибкой и предложит все-таки добавить его к коду картинки.

<img src="/Путь к картинке" alt="текст" />

Ссылка у нас есть, картинка есть, но как сделать картинку ссылкой?
Чтобы сделать картинку ссылкой нужно просто объединить их, чтобы получилась такая HTML конструкция:

<a href="здесь ссылка на ресурс"><img src="/Путь к картинке" alt="текст" /></a>

Все, мы сделали картинку ссылкой.

— Обязательно подписывайте атрибут alt=»текст» и рекомендуется использование title=»», в качестве альтернативного текста лучше всего использовать ключевые слова статьи, в которой находится картинка. Поисковые системы отлично индексируют картинки и описания к ним.

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

— Как вам статья «Как сделать ссылку. Как сделать картинку ссылкой» ?

Лучший способ отблагодарить автора

Похожие по Тегам статьи

Как делается в html ссылка картинка

Здравствуйте, уважаемые читатели этого блога. Вы наверняка не раз замечали в интернете картинки, на которые можно было кликнуть и перейти таким образом на какую-нибудь страницу. А как это реализовывается изнутри? Как сделать в html ссылку картинку? Очень просто.

Ссылка картинка в html

Тут нужно поступить очень просто. Тег вставки изображения – img. Он одинарный. Тег ссылки – a. Он парный. Соответственно, нужно всего лишь в парный тег ссылки вставить img. И вот как это будет примерно выглядеть:

<a href = “url-адрес”><img src = “путь к изображению”></a>

Итак, всего лишь два тега и два обязательных атрибута – адрес, по которому осуществиться переход при клике, и адрес непосредственно изображения. Остальные атрибуты, вроде стилевых классов или открытия ссылки в новом окне можно прописать по желанию.

Но это не единственный способ сделать в html ссылку картинку. Есть еще один, при котором не нужно вставлять изображение непосредственно в html-код.

Способ номер 2

<a href = “url-адрес”></a>

Тут мы не вставили никакой картинки в код. Так как же мы ее получим? Через css и добавление фона к ссылке. Но для начала нужно превратить ссылку в блочный элемент и задать ей такие размеры, как картинке, которая будет выступать в качестве ее фонового изображения. Следующий код предполагает, что картинка имеет разрешение 200 на 200 пикселей.

A{
Display: block;
Width: 200px;
Height: 200px;
Background: url(путь к изображению) no-repeat;
}

Тут мы прописали четкие размеры элемента, потом задали картинку-фон и попросили браузер не повторять ее. Это будет абсолютно такая же ссылка-картинка, как и в предыдущем варианте, за исключением того, что она будет иметь блочные свойства.

Какой способ выбрать

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

Картинки в контентной части, конечно, наоборот нужно вставлять с помощью тега img, ведь ему можно задать еще и атрибут альтернативного текста, а это чуть-чуть улучшит ревелантность текста.

Как создать гиперссылку : WEBCodius

Здравствуйте уважаемые читатели блога webcodius.ru. Сегодня мы поговорим о том как создавать гиперссылки в html, узнаем как использовать тег «А» и его атрибуты href и target, научимся делать картинку ссылкой.

Гиперссылки являются ключевыми элементами web-страницы. Они связывают разрозненные html-страницы воедино, в полноценный web-сайт. Обычно ссылки отображаются как подчеркнутый фрагмент текста, при наведении на который, курсор мыши приобретает вид указывающего пальца.

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

Создание текстовых гиперссылок

Начнем с простого и рассмотрим создание обычных текстовых ссылок. Для создания текстовой гиперссылки достаточно любой фрагмент текста, который должен стать ссылкой, заключить в парный тег А. И в атрибуте href этого тега необходимо указать адрес целевой web-страницы в интернете:

Тег «А» или гиперссылка представляет собой встроенный элемент html-страницы, т.е. ссылка должна быть частью блочного элемента, например абзаца. Например:

В этом фрагменте html-кода создается абзац, который содержит ссылку. Ссылка указывает на web-страницу page15.html, которая находится в папке catalog, хранящейся в корневой папке сайта www.site.ru.

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

Можно создавать пустые гиперссылки, которые никуда не ведут. Для этого достаточно в атрибут href добавить знак #:

Если щелкнуть по такой ссылке ничего не произойдет. Обычно пустые гиперссылки применяются если необходимо при щелчке по ней запустить какой-нибудь javascript-код.

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

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

Интернет адреса

Далее рассмотрим виды интернет-адресов применяемых в атрибуте href. В коде html применяются полные и сокращенные интернет адреса.

Полный адрес содержит содержит интернет-адрес web-сервера, и путь к файлу, который необходимо получить. Например:

Здесь www.site.ru адрес web-сервера, а /catalog/page15.html — путь к файлу на этом сервере. Вообще, обычно полные интернет-адреса используют только если необходимо создать гиперссылку, указывающую на какие-либо ресурсы находящиеся на другом web-сайте.

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

Сокращенные интернет-адреса бывают абсолютными и относительными. Абсолютный адрес задает путь к целевому файлу относительно корневой папки сайта. Такой адрес начинается с символа /(слэш), который и обозначает корневую папку. Например, адрес «/page15.html» указывает на файл page15.html, который хранится в корневой папке сайта. Или адрес «/catalog/page.html» указывает на файл page.html, который помещен в папку catalog, вложенной в корневую папку сайта.

Относительный адрес задет путь к файлу относительно файла текущей веб-страницы. Относительные адреса не содержат в начале символа слэш. Рассмотрим несколько примеров.

Например адрес «page.html» указывает на файл, который находится в той же папке, что и файл текущей web-страницы. А адрес «catalog/page.html» откроет файл page.html, хранящийся в папке catalog, вложенной в папку, в которой хранится текущая страница.

С помощью двух точек вначале адреса можно указывать папки предыдущего уровня вложенности. Так, например адрес «…/page.html» указывает на страницу page.html, хранящуюся в папке, в которую вложена папка с текущей веб-страницей.

Ссылка на почту

С помощью языка html можно создавать почтовые гиперссылки, щелчок по которым запускает программу почтового клиента. При указании адреса в атрибуте href перед email необходимо поставить «mailto:», т.е. примерно так: href=»mailto:[email protected]». Причем после двоеточия перед почтовым адресом не должно быть пробелов.

Например, я хочу создать ссылку указывающую на почтовый адрес [email protected]. Тогда моя почтовая ссылка в html-коде будет выглядеть так:

написать письмо

Если щелкнуть по этой ссылке, то у вас запустится установленная по умолчанию почтовая программа и откроется диалог создания нового письма, в котором в поле «кому» будет вставлен адрес [email protected].

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

Так как тег img для вставки изображения является строчным элементом html-страницы, то просто вставляем этот тег внутрь тега «А» вместо текста:

Этот html-код создаст изображение-ссылку. В результате на странице отобразится картинка, вся область которой станет кликабельной и при щелчке по ней произойдет переход по указанному в коде адресу.

Кроме этого простого варианта создания картинки-гиперссылки, html позволяет превратить в гиперссылку часть графического изображения. Более того, имеется возможность разбить изображение на части, каждое из которых будет представлять из себя гиперссылку, указывающей на свой интернет-адрес. Такой вариант называется картой изображений.

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

Изображение-карта создается в три этапа:

1. Создание самого изображения с помощью тега img: img src=»map.jpg»
2. Создание карты с помощью парного тега map. С помощью обязательного атрибута name этого тега задается уникальное в пределах страницы имя карты. Далее необходимо привязать карту к изображению с помощью атрибута usemap тега img, значением которого должно состоять из символа # и имени карты:
   
3. Создание описаний областей гиперссылок с помощью одинарных тегов area. Данные тег должен содержать атрибуты: shape — форма области, coords — координаты области и href — адрес гиперссылки. Эти описания помещают внутрь тега map.

Примерно так выглядит полный html-код, создающий карту изображения:

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

Якоря

Якорь или метка — это такой вид гиперссылки, которая помечает отдельный фрагмент html-страницы и позволяют перемещаться по содержимому документа.

Возможно, вы уже встречали страницы, где сразу после заголовка шел список названий разделов статьи, щелчок по которым перекидывал вас на интересующий фрагмент записи.

Якоря создают, как и обычные гиперссылки, с помощью парного тега A, только вместо атрибута href в него помещают атрибут name или id, значение которых задает уникальный идентификатор метки. При этом сам тег «A» обычно не имеет никакого содержимого:

Есть второй способ создания якоря, при котором не надо создавать пустые элементы «А». А можно использовать уже имеющиеся в веб-странице элементы, например теги html заголовков и абзацев. Для этого в нужный элемент добавляем универсальный атрибут id:

Далее необходимо сделать ссылку на созданный якорь. Для этого используется обычный тег «А» с обязательным атрибутом href, значение которого формируется из знака решетки (#) и названия метки:

При нажатии по такой ссылке, браузер не открывает новую страницу, а прокручивает текущую до тех пор пока html-элемент с якорем не займет позицию в верху экрана. Соответственно, чтобы все правильно работало, все метки на одной странице имели уникальные имена.

Если при создании ссылки на якорь в значении атрибута href после знака решетки # не поставить никакого значения, то щелчок по такой ссылке прокрутит страницу к началу. Таким образом можно создать простейшую кнопку «Наверх»:

НАВЕРХ

На этом рассказывать о создании гиперссылок я заканчиваю, напомню только основные моменты:

1. Для создания ссылок используется парный тег А с обязательным атрибутом href, в значении которого помещается адрес целевой страницы;
2. При создании ссылки на почту в атрибуте href перед адресом почты необходимо поставить «mailto:»;
3. Если надо создать ссылку изображение, то просто помещаем тег img внутрь тега А.

На этом все, не забывайте подписываться на обновления блога! До новых встреч!

HTML- изображение как ссылка

На веб-страницах изображения можно использовать для создания гиперссылок для этого нужно использовать изображение внутри гиперссылки на месте текста, как показано ниже −

<!DOCTYPE html> <html> <head> <title>Изображение как гиперссылка</title> </head> <body> <p>Кликните по ссылке</p> <a href = «http://www.right-bracket.ru» target = «_blank»> <img src = «/images/logo.png» alt = «Правая Скобка» border = «0»/> </a> </body> </html>

Результат будет следующий

Изображения чувствительные к мышке
Стандарты HTML и XHTML предоставляют функцию, которая позволяет встраивать множество различных ссылок в одно изображение. Вы можете создавать различные ссылки на одном изображении на основе различных координат, доступных на изображении. После того, как различные ссылки прикреплены к различным координатам, нажимая на различные части изображения можно открыть различные веб-страницы. Чувствительные к мыши изображения еще называется картами изображений.
Существует два способа создания карт −

• Изображения на стороне сервера, карты − это активированный атрибут ismap тега <img> и требует доступа к серверу связанным приложениям обработки карты изображения.
• Клиентские карты изображения − они создаются с помощью атрибута usemap тега <img> вместе с соответствующими тегами <map> и <area>.

Карты Изображений на стороне сервера
Изображения надо сделать гиперссылкой и использовать атрибут ismap. Когда пользователь нажимает на какое-то место на изображении, браузер передает координаты указателя мыши вместе с URL-адресом, указанным в <a>  теге к веб-серверу. Сервер использует координаты указателя мыши, чтобы определить, какой документ передать обратно в браузер.
Когда используется ismap, атрибут href содержащего тега <a> должен содержать URL-адрес серверного приложения, такого как сценарий cgi или PHP и т. д., для обработки входящего запроса на основе переданных координат.
Координаты положения мыши-это пикселы экрана, отсчитываемые от левого верхнего угла изображения, начиная с (0,0). Координаты, которым предшествует вопросительный знак, добавляются в конец URL.
Например, если пользователь нажимает на 20 пикселей и 30 пикселей вниз от левого верхнего угла следующего изображения −
Который был сгенерирован следующим фрагментом кода −

<!DOCTYPE html> <html> <head> <title>ISMAP гиперлинк</title> </head> <body> <p>Кликните на следующий линк</p> <a href = «/cgi-bin/ismap.cgi» target = «_self»> <img ismap src = «/images/logo.png» alt = «Правая Скобка» border = «0»/> </a> </body> </html>

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

Карты изображений на стороне клиента
Карты изображений на стороне клиента активируются атрибутом usemap тега <img /> и определяются специальными тегами расширения <map> и <area>.
Изображение, которое будет формировать карту, вставляется на страницу с использованием тега <img /> в качестве обычного изображения, за исключением того, что оно содержит дополнительный атрибут, называемый usemap. Значение атрибута usemap — это значение, которое будет использоваться в теге <map> для связывания тегов карты и изображения. <map> вместе с тегами < area> определяют все координаты изображения и соответствующие ссылки.
Тег <area> внутри тега карты определяет форму и координаты для определения границ каждой точки доступа, доступной на изображении. Пример из карты изображений −

<!DOCTYPE html> <html> <head> <title>USEMAP гиперссылка</title> </head> <body> <p>Нажмите на клавишу</p> <img src = /images/html.gif alt = «HTML карта» border = «0» usemap = «#html»/> <!— Создание карты —> <map name = «html»> <area shape = «Круг» coords = «80,80,20» href = «/css/css.html» alt = «Ссылка на CSS» target = «_self» /> <area shape = «прямоугольник» coords = «5,5,40,40» alt = «Ссылка на jQuery» href = «/jquery/js.html» target = «_self» /> </map> </body> </html>

Система координат
Фактическое значение координат полностью зависит от рассматриваемой формы. Краткое описание —

• rect = x₁ , y₁ , x₂ , y₂х₁ и y₁ — координаты верхнего левого угла прямоугольника; х₂ и y₂— координаты правого нижнего угла.
• circle = x_c , y_c , radiusx_c и y_c координаты центра окружности и radius — радиус окружности . Окружность с центром в 200,50 и радиусом 25 будет иметь атрибут coords  = «200,50,25 «
• poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , … x_n , y_nРазличные пары x-y определяют вершины (точки) многоугольника с «линией», проведенной из одной точки в следующую точку. Ромбовидный многоугольник с верхней точкой в 20,20 и шириной 40 пикселей в самых широких точках будет иметь атрибут coords = «20,20,40,40,20,60,0,40».

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

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

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

      Здравствуйте уважаемые друзья! Сегодня мы рассмотрим новую, вспомогательную, тему из цикла Как сделать гиперссылку?». Посмотрим на картинку в левом углу. Если навести на нее стрелкой мышки и клацнуть, то сразу откроется другая статья под названием «Что такое гиперссылка?». Это произойдет потому, что картинка исполняет роль ссылки. На многих сайтах используют этот прием, особенно на коммерческих, где рекламируют свой товар. Удобно — кликнул на фотографии и открылась страничка с его характеристиками.   Поэтому настоящая публикация посвящена  вопросу «Как картинку сделать html ссылкой?«. 

        Ничего сложного здесь нет. Вспоминаем основную формулу текстовой активной ссылки:

              <a href=«URL адрес» target=»_self»>Текст</a>

     Это основа любой ссылки. Если кто не знает, что это такое, перейдите по выше указанной картинке и проштудируйте изложенный там материал. Без его знаний данную статью читать бессмысленно. Но прежде чем картинку сделать ссылкой нам нужно: Первое действие —  составить html код самой картинки. Вот основная схема кода любого изображения:

   <img src=«URL адрес картинки» alt=«Текст для картинки»/>

а  дальше:

1. Чтобы код изображения сработал надо вставить туда URL адрес картинки. Напоминаем манипуляции с кодом делаем в Блокноте.txt. Где взять этот URL адрес? У каждого движка CMS есть так называемая корневая папка или Файловый менеджер. Вот туда сначала вставляется файл изображения, а потом копируется его URL адрес. Для «Укозовцев» вопрос простой, вставляем изображение в Файловый менеджер Панели Управления, а оттуда берем уже готовый URL. Как это сделать подробно описано в статье «Файловый менеджер». 
2. Теперь разберемся, что такое атрибут alt=. Здесь еще проще. Вместо «Текст для картинки» вставляем любой альтернативный текст, например название картинки или ключевое слово (фразу)

​     Вот и все. Код картинки из которой будем делать ссылку html готов.

Картинка ссылка html

       Второе действие — теперь будем составлять сам код картинки html ссылки. Для этого 3. берем первоначальный код ссылки и вставляем туда URL адрес страницы на которую 

          <a href=«URL адрес» target=»_self»>Текст</a>

будем ссылаться. А вместо слова Текст 4. вставляем html код самой картинки, см рисунок ниже…

      Вот и все! Оказывается так просто! Осталось полностью собранный код вставить в исходный html редактор Вашей страницы. На дорогу мы предлагаем Вам познакомится с дополнительным материалом по этой теме.

  Дополнительные статьи на тему Гиперссылки:                 

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

И смех, и грех:            

>