|
Изображение-карта
Если в качестве ссылки используется изображение, и если щелкнуть по разным фрагментам рисунка, то загружаются различные web-документы.
Создание изображения-карты происходит в несколько шагов:
1. Поиск и подбор подходящего изображения;
2. Разбиение изображения на фрагменты;
3. Создание необходимых html-файлов для ссылок по фрагментам;
4. Ввод необходимых тегов для описания фрагментов.
Вставка изображения-карты осуществляется с помощью тега вставки рисунка <IMG>, и ключевых слов:
Ключевое слово | Величина | Значение |
src= | имя файла | Имя файла, содержащего изображение |
usemap= | “#название” | информация о том, что изображение является изображением-картой |
Для описания фрагментов используется теги <MAP> и </MAP>, также тег <AREA> и ключевые слова shape, coords и href:
Ключевое слово | Величина | Значение |
shape= | имя | название фрагмента |
| rect | прямоугольник |
coords= | “координаты” | указываются координаты левого верхнего и правого нижнего углов прямоугольника (через запятую) |
| circle | окружность |
coords = | “координаты” | указываются координаты центра окружности и радиус (через запятую) |
| poly | многоугольник |
coords = | “координаты” | указываются координаты вершин многоугольника (через запятую), причем координаты первой и последней точек должны совпадать, для обеспечения замкнутого контура |
href= | имя файла | имя html-файла, на который осуществляется ссылка |
Например,
прямоугольный фрагмент:
<AREA | shape= | rect | coords= | “0,0,50,100” | href= | f1.htm | > |
| ↑ | ↑ | ↑ | ↑ | ↑ | ↑ |
|
| ключевое слово | название фрагмента | ключевое слово | координаты | ключевое слово | имя файла |
|
фрагмент-окружность:
<AREA | shape= | circle | coords= | “50,1100,25” | href= | f2.htm | > |
| ↑ | ↑ | ↑ | ↑ | ↑ | ↑ |
|
| ключевое слово | назв. фрагмента | ключевое слово | координаты | ключевое слово | имя файла |
|
многоугольный фрагмент:
<AREA | shape = | poly | coords= | “0,0,50,100,1,1,0,0” | href= | f3.htm | > |
| ↑ | ↑ | ↑ | ↑ | ↑ | ↑ |
|
| ключевое слово | назв. фрагм. | ключевое слово | координаты | ключевое слово | имя файла |
|
Для сложных деталей рисунка можно комбинировать описание фрагментов. В случае перекрывающихся фрагментов переход осуществляется по фрагменту, описанному первым в списке.
Задание для самостоятельной работы
1. Изображение-карта
- подобрать подходящий рисунок для работы с изображением-картой;
- разбить изображение-карту на фрагменты, каждого типа фрагментов не менее трех;
- предусмотреть фрагмент – все оставшееся поле рисунка;
- создать отдельные файлы – web-документы для каждого фрагмента изображения-карты;
- создать ссылки на фрагменты карты, предусмотреть обратный переход.
Дата добавления: 2015-08-28; просмотров: 35 | Нарушение авторских прав
<== предыдущая лекция | | | следующая лекция ==> |
Отображение сетки таблицы | | | Реклама в Интернет |