Размеченные изображения

Вводные понятия

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

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

Пример:

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

Между этими командами для каждой области изображения вставляется подтег area с необходимыми атрибутами.

Области могут перекрываться. В перекрытии будет действовать первая ссылка.

Атрибут shape принимает четыре значения rect (прямоугольник), circ (круг), poly (многоугольник), default (прямоугольник). Если атрибут не задан, то будет прямоугольник.

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

Атрибут nohref указывает, что переходы делать не надо. Полезно, если в области надо вырезать "нечувствительную" дырку.

Атрибут coords задает координаты фигур в пикселях. Все координаты записываются через запятую:

• прямоугольник - задаются координаты левого верхнего и правого нижнего углов. Например, coords="0,0,49,49"
• круг - задаются координаты центра и радиус. Например, coords="50,50,25"
• многоугольник - задается последовательностью координат от первой до предпоследней вершины. Считается, что последняя вершина совпадает с первой. Например, coords="0,0,99,49,49,99"

Практическое занятие по созданию размеченной карты

Создадим размеченную карту района. Карта разбита на 4 треугольника, как показано на рисунке.

При нажатии мышью в левом треугольнике отображается фотография школы. Остальные области не чувствительны к нажатию мыши.

Для просмотра примера в Internet Explorer нажмите на изображение или ссылку

Пример страницы с размеченным изображением

Самостоятельная работа по созданию размеченного изображения

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