Основы HTML

  1. Термины и определения
  2. Принципы WEB 2.0
  3. Структура HTML-документа
  4. Основные метатеги
  5. Форматирование текста HTML
  6. Списки
  7. Текст фиксированного формата
  8. Выделение фрагментов текста
  9. Изменение параметров шрифта
  10. Графика
  11. Таблицы
  12. Гиперссылки
  13. Изображения-карты
  14. Фреймы

Основы CSS3

  1. Что такое CSS
  2. Синтаксис CSS
  3. Стилевые классы
  4. Комбинированные стили
  5. Таблицы CSS
  6. Правила каскадности CSS
  7. Рекомендации применения стилей
  8. Параметры шрифтов
  9. Разрывы строк, вертикальное выравнивание
  10. Параметры фона
  11. Параметры абзаца
  12. Параметры списков
  13. Параметры курсора
  14. Параметры отступов
  15. Параметры рамки
  16. Параметры выделения
  17. Параметры отображения
  18. Контейнеры


   

Изображения-карты, карты ссылок

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

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

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

На первом этапе создают изображение при помощи тега IMG

<IMG SRC="map.jpg">

На втором этапе создают карту при помощи тега MAP

<MAP NAME="sample_map">

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

После того, как изображение и карта созданы, надо привязать карту к изображению при помощи атрибута USEMAP тега IMG

<IMG SRC="map.jpg" USEMAP="#sample_map">

В атрибуте USEMAP указывается значение атрибута NAME карты-ссылок, с обязательным добавлением знака # перед именем.

На третьем этапе веб-мастер разбивает изображение на нужные зоны при помощи тега AREA, который имеет следующий синтаксис:

<AREA [SHAPE="rect|circle|poly"] COORDS="<параметры>" HREF="<URL>">

В качестве координат изображения выступают пиксели изображения - 1 единица = 1 пикселю. Отсчет ведется от верхнего левого угла изображения - это точка с координатами (0,0).

Атрибут SHAPE описывает форму зоны карты ссылок, атрибут COORDS назначает координаты конкретной зоны. Количество точек в этом атрибуте зависит от формы зон.

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

Атрибут HREF указывает страницу на которую ведет данная зона карты ссылок.

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


Северо-восточная часть Австралии Северо-западная часть Австралии Юго-восточная часть Австралии Юго-западная часть Австралии
ПРИМЕР:

<img src="img/map.jpg" width="132" height="121" usemap="#australia">

<map name="australia">

<area shape="rect" coords="0,0,68,60" href="1.html" target="_blank">

<area shape="rect" coords="68,0,132,60" href="2.html" target="_blank">

<area shape="rect" coords="0,60,68,120" href="3.html" target="_blank">

<area shape="rect" coords="68,60,132,120" href="4.html" target="_blank">

</map>

TOP ↑