Карты изображений html

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

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

В начале мы конечно начнём с самого простого, давайте сделаем простой ссылкой изображение на нашем тестовом сайте. Для этого нужно просто перейти в код нашего сайта через phpdesigner и найти там тег изображения <img>, а далее заключаем его в тег ссылки <a>.

<a href="http://sokolskoe.net" target="_blank"><img src="img/kashok.jpg" width="500" height="375" alt="Это Я!" align="left" hspace="10" vspace="10" title="Это я на фотке!" border="0"></a>

Если вы пользуйтесь браузером Mozilla FireFox, то у этого изображения которое мы сделали ссылкой, может появиться рамка зеленоватого цвета, чтоб её не было, пропишите в теге изображения, атрибут border="0".

Как делать картинку ссылкой мы уже умеем, так как проходили это в уроке: Создание ссылок в html, а в этом уроке мы продолжали разбираться с другими видами ссылок, здесь по сути нет ничего сложного, но бывают ситуации, когда одной и той же картинке нужно придать сразу несколько ссылок, например на одном изображении нарисовано три предмета, и каждый из этих объектов должен вести на определённый сайт. 

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

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

Эти ссылки на одном изображений создаются при помощи так называемой техники imagemap, что переводится как "карта изображения", эта так называемая ссылочная карта, невидимым образом накладывается на изображение, а делается это при помощи тега <map>, его лучше прописывать сразу после самого тега картинки.

<img src="img/Karta_izobrazeniy_v_html.gif" width="486" height="206" alt="Карта изображений html" vspace="10" usemap="#formap">
<map id="formap" name="formap">
<area href="http://sokolskoe.net" shape="rect" coords="50,61,194,160">
</map>

Давайте теперь я вам разъясню весь представленный выше код. Тег картинки <img>, я думаю объяснять вам как он создаётся не нужно, так как у нас был по этой теме отдельный урок, но в этом теге картинки появился новый атрибут "usemap", в нём мы указываем через решётку название айдишника (в нашем случае это formap), этот же айдишник прописывается в теге <map>, это делается для того, чтобы связать тег изображения с тегом <map>, и чтобы браузер понял, что в этом теге прописаны карты изображений html, для той картинки, у которой будет совпадать значение из атрибута "usemap" и атрибута "id" из тега <map>.

Кроме атрибута "id", в открывающем теге <map>, обязательно нужно прописать еще один атрибут "name", в нём прописывается то же самое значение что и в "id".

В самом теге <map>, прописывается одинарный тег <area>, но помните, что одна ссылочная область указывается в одном теге <area>, а следующая ссылочная область, прописываться уже в отдельном теге <area>. , короче в этом теге с начала указывается ссылка, далее прописывается атрибут "shape", в нём указывается фигурный вид самой карты изображений html, в нашем случае это "rect", что означает квадрат.

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

Первая цифра, в нашем случае это 50, означает что верхний левый угол ссылочной области (а она у нас как вы помните квадратная), по оси "X", от левого края изображения, насчитывает 50 пикселов, цифра 61, по оси "Y" (от верхнего края изображения), отсчитывается от того же верхнего левого угла ссылочной области.

Последующие две цифры "194" и "160", высчитываются по той же схеме, только отсчет уже производится не от верхнего левого угла ссылочной области, а от нижнего правого.
Но для тех, кому не охота возиться с этими пикселами по осям (а таких как раз большинство  ), существуют различные программы и онлайн сервисов, из таких бесплатных сервисов, я могу вам посоветовать: http://www.maschek.hu/imagemap/imgmap

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