Основы HTML и веб-дизайна 2019-2020. Как превратить изображение в ссылку?

Очень часто в качестве гиперссылок применяют изображения: различные пиктограммы, логотипы, небольшие фотографии и так далее. Если использовать в качестве гиперссылки изображение, следует знать об одной особенности: если у обычных картинок по умолчанию рамки нет, то картинки, “по совместительству” назначаемые гиперссылками, по умолчанию имеют рамку черного цвета толщиной 2 пикселя.

Это не всегда выглядит так красиво, как, возможно, думали разработчики этого стандарта. Поэтому ключевые слова <IMG> таких картинок обычно имеют параметр border=0. Еще один вариант, когда различные фрагменты одной картинки являются ссылками на другие объекты, встречается очень часто. И правда, это выглядит естественно, особенно если веб-дизайнер хочет, чтобы у пользователя складывалось нормальное представление об Интернет-странице. Такие объекты представляют собой одну картинку на несколько разных ссылок и описываются они картами изображений (по-английски image map). Что представляет собой карта изображения?

Вставка картинки в html

Представим себе, мы имеем картинку, и ее разные объекты должны являться ссылками на разные интернет-страницы. Что мы должны сделать, чтобы осуществить задуманное, не разделяя картинку на части? Очевидно, веб-дизайнеру нужна конкретная конструкция, позволяющая сделать разметку изображения, разделить, так сказать, ее на “зоны влияния” различных гиперссылок. Причем, в результате у веб-дизайнера должна появиться возможность создания зоны разной геометрической формы: к примеру, не только круглые, но и прямоугольные.

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

Как вставить картинку в html

Для вывода карты изображения будем использовать конструкцию, которая состоит из ключевого слова <МАР> и “внедренных” в него ключевых слов <AREA>. Ключевое слово <МАР> (от английского map – “карта”) обозначает конкретную карту изображения целиком и ключевые слова <AREA> (от английского area – “область”, “зона”) указывают отдельные области данной карты. Стоит отметить, что ключевое слово <МАР> является парным (имеется ключевое слово </MAP>), <AREA> же не является парным (нет в HTML ключевого слова </AREA>). Весь исходный код будет выглядеть примерно так:

• <МАР параметры карты>
• <AREA параметры области>
• <AREA параметры другой области>
• </МАР>

Какими параметрами располагает вся область? Положение? Размеры? Но все эти свойства могут быть определены самым изображением, так что прописывать их снова нет смысла. Достаточно привязать карту изображения к самому рисунку. Именно для этого будет использован единственный параметр ключевого слова <МАР> под названием name. Только благодаря этому параметру карте будет присвоено уникальное имя, которое затем будет указано в ключевом слове<IMG> с помощью параметра usemap. В результате получается, что карта изображения как бы “ложится” на само изображение:

• <МАР name=”mymap”>
• </МАР>
• <IMG src=bigimage.jpg usemap= Imymap border=0>

Имя картинки составляется согласно тех же правил, что и другие имена в языке HTML. Но стоит обратить внимание: при попытке ссылки на него следует прописать значение параметра usemap таким образом, чтобы перед именем карты был установлен символ I. Какие могут быть параметры у зон, на которые будет разбита картинка? Прежде всего, пользуясь параметром shape, мы сможем указать форму области: форма прямоугольника (параметр rectangle), форма круга (параметр circle) или форма произвольного многоугольника (параметр polygon). В сокращенном виде параметры прописываются следующим образом: rect форма прямоугольника, circ – форма круга и poly – форма многоугольника.