ЭЛЕКТИВНЫЙ КУРС «РАЗРАБОТКА САЙТОВ» УРОК «РАЗМЕЧЕННЫЕ ИЗОБРАЖЕНИЯ»
Одно из самых удобных и часто используемых при создании сайтов средство разбиения графического изображения для более детального изучения его фрагментов. Любое изображение на странице может быть разбито на области. К каждой области можно привязать переход на собственную гиперссылку. Таким образом, создаётся очень удобный графический интерфейс для карт, путеводителей, справочников и т. д.
Для включения разметки в тег img следует добавить атрибут usemap, который указывает ссылку на описание областей.
Пример:
<img src= “moscowmap1.gif” usemap=”#coord”>
Описание областей задаётся тегом map и может размещаться в любой части документа. Для связи описания и изображения служит атрибут тега name, который должен содержать имя ссылки.
Между этими командами для каждой области изображения вставляется подтег area с необходимыми атрибутами.
|
Атрибут |
Функция |
|
coords |
Координаты области |
|
href |
Ссылка дляданной области |
|
nohref |
Отсутствие ссылки |
|
shape |
Форма области |
Области могут перекрываться. В перекрытии будет действовать первая ссылка.
Атрибут 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 треугольника, как показано на рисунке.
При нажатии мышью в левом треугольнике отображается фотография школы. Остальные области не чувствительны к нажатию мыши.
<html>
<head>
<mapname="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 st yle="border: groove" src="moscowmap1.jpg" usemap="#coord">
</center>
</body>
</html>
Самостоятельная работа по созданию размеченного изображения
Подберите набор изображений по какой-то теме, например, модели автомобилей, и сохраните этот набор на компьютере в виде файлов формата jpg. Создайте единое изображение из этого набора путем склейки уменьшенных изображений и сохраните его в виде файла формата jpg на компьютере. Сформируйте размеченное изображение на странице на базе единого файла, где отдельными областями будут уменьшенные изображения из набора. При нажатии на отдельную область должно вызываться полное изображение из набора (эффект линзы).
- Моисеева Н.Н. Начала Web-дизайна. – М: Информатика и образование, № 10-12, 2007.
- Моисеева Н.Н. Дополнительные возможности форматирования в документах HTML. – М: Информатика и образование, № 1-4, 2010.
| Тип выступления | Публикация |
| Уровень образования | Среднее (полное) общее |
| Ключевые слова | Размеченные изображения в HTML, тег map, тег area, тег img, атрибут usemap, Разработка сайтов |
|
