Создавая баннеры и карты веб-сайта, начинающие вебмастера сталкиваются с таковой неувязкой, как воткнуть ссылку в картину, сделать с ее помощью меню ярче и увлекательнее. Но как это выполнить? Нет ничего проще, если знать язык HTML.

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

Где употребляется картинка-ссылка

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

Картинки-ссылки обычно употребляются в качестве баннеров, зазывающих маркетинговых рисунков. Примером этого могут служить изображения все в том же «ВКонтакте». Вспомните, сколько раз вам доводилось жать на фотографию, в которую был встроен тот либо другой адресок? Не считая того, достаточно нередко они употребляются в виде меню групп и сообществ, в особенности если содержат особые записи. Много таких изображений встречается и на других веб-сайтах.

Вставляем ссылку в картину

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

Если вы понимаете, как конкретно задается рядовая ссылка с помощью HTML-разметки, то заморочек у вас появиться не должно. Единственное отличие в том, что заместо текста ссылки задается изображение.

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

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

Дальше пишем последующее: <a href=»адресок ссылки»>картина</a> — особый код. Картинка-ссылка задается конкретно с его помощью.

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

Делаем меню из рисунки

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

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

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

Как сделать

Разберем чуток подробнее 1-ый метод.

Начнем с того, что вам пригодится познание графических редакторов и HTML. Как картину сделать ссылкой, даст подсказку конкретно данный вид разметки страничек.

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

Если это ваш свой веб-сайт – подойдет рядовая галерея либо библиотека файлов, для «ВКонтакте» это может быть альбом группы либо общества (лучше закрытый).

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

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

Делаем карту веб-сайта

Итак, если вас не устраивает 1-ый вариант, и вы желаете выяснить, как сделать картину в картинке ссылкой другим методом, то можем предложить вам создать карту ссылок. Делается она легче, вот только могу появиться препядствия с заданием характеристик. Почему, поймете далее.

Сначала следует уяснить, что карта веб-сайта подключается к изображению с помощью команды usemap=»#map1, которая прописывается в тэге img. Потому, заливая картину на веб-сайт, непременно допишите в тэге вторую часть — usemap=»#заглавие карты».

Предстоящая разметка рисунки на зоны, к которым прикреплены ссылки, делается с помощью парного тэга <map> </map>, который можно расположить в любом комфортном вам месте меж парными тэгами <body> </body>.

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

Характеристики ссылки

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

Побеседуем незначительно об главных параметрах парного тэга <map>. Сначала это name, который равен значению usemap. Так вы обозначаете, что данная карта пишется конкретно для данной рисунки.

Дальше снутри парного тэга <map> прописывается очередной тэг — <area>, который обрисовывает области ссылки. Он не парный и, естественно, у него есть свои характеристики.

Самый 1-ый – shape. С его помощью вебмастер задает вид области. Это может быть:

• окружность — circle;
• прямоугольник — rect;
• многоугольник — poly;
• остальная область рисунки – default.

Последующий — coords. С его помощью задаются координаты области в пикселях. Начало отсчета в данной системе координат — верхний левый угол. Вот тут-то и заключается основная неувязка – не так просто задавать координаты средством пикселей, в особенности если отсутствует знакомство с компьютерной графикой.

Упомянем также достаточно узнаваемый href, который задает адресок ссылки.

И последний параметр, который следует упомянуть, – nohref. Он указывает, что обозначенная область не является ссылкой.

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

Советы

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

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

Выводы

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