Документ взят из кэша поисковой машины. Адрес
оригинального документа
: 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, который указывает ссылку на описание областей.
Пример:
Описание областей задается тегом map и может размещаться в любой части документа. Для связи описания и изображения служит атрибут тега name, который должен содержать имя ссылки.
Между этими командами для каждой области изображения вставляется подтег area с необходимыми атрибутами.
Атрибут | Функция |
---|---|
coords | Координаты области |
href | Ссылка для данной области |
nohref | Отсутствие ссылки |
shape | Форма области |
Области могут перекрываться. В перекрытии будет действовать первая ссылка.
Атрибут shape принимает четыре значения rect (прямоугольник), circ (круг), poly (многоугольник), default (прямоугольник). Если атрибут не задан, то будет прямоугольник.
Атрибут href задает гиперссылку, куда будет осуществлен переход при нажатии мышью на область.
Атрибут nohref указывает, что переходы делать не надо. Полезно, если в области надо вырезать "нечувствительную" дырку.
Атрибут coords задает координаты фигур в пикселях. Все координаты записываются через запятую:
Создадим размеченную карту района. Карта разбита на 4 треугольника, как показано на рисунке.
При нажатии мышью в левом треугольнике отображается фотография школы. Остальные области не чувствительны к нажатию мыши.
Для просмотра примера в Internet Explorer нажмите на изображение или ссылку
Подберите набор изображений по какой-то теме, например, модели автомобилей, и сохраните этот набор на компьютере в виде файлов формата jpg. Создайте единое изображение из этого набора путем склейки уменьшенных изображений и сохраните его в виде файла формата jpg на компьютере. Сформируйте размеченное изображение на странице на базе единого файла, где отдельными областями будут уменьшенные изображения из набора. При нажатии на отдельную область должно вызываться полное изображение из набора (эффект линзы).