Документ взят из кэша поисковой машины. Адрес оригинального документа : http://www.schools.keldysh.ru/sch1019/project/web26.htm
Дата изменения: Fri Apr 5 19:46:02 2013
Дата индексирования: Fri Feb 28 05:07:02 2014
Кодировка: Windows-1251
Размеченные изображения

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

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

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

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

Пример:


<img src="moscowmap1.gif" usemap="#coord">

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

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

Атрибут Функция
coords Координаты области
href Ссылка для данной области
nohref Отсутствие ссылки
shape Форма области

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

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

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

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

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

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

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

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

<html>
<head>
<map name="coord">
<area coords="0,0,300,200,0,400" shape="poly" href="sch.jpg">
<area coords="0,0,600,0,300,200" shape="poly" nohref>
<area coords="600,0,600,400,300,200" shape="poly" nohref>
<area coords="0,400,300,200,600,400" shape="poly" nohref>
</map>
</head>
<body>
<center>
<img style="border: groove" src="moscowmap1.jpg" usemap="#coord">
</center>
</body>
</html>

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


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

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

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