ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Клиентские карты-изображения
Не правда ли, скучно представлено содержимое html-документа в левом кадре примера из предыдущей темы? На много красивее выглядели бы ссылки, если их представить в виде изображения. Рассмотрим, как создается такая ссылка- изображение.
Картой-изображением (imagemap) называется карта, содержащая несколько областей изображения, каждая из которых имеет ссылку на определенный адрес URL. Цель создания карты: одно изображение (карта) содержит красиво оформленные ссылки на несколько разных документов. Щелкая мышкой по ссылкам, посетитель Web-сайта переходит к соответствующим документам. Описание карты:
<MAP name=«имя_карты»>
<AREA shape= «Форма фигуры»
coords= «координаты фигуры»
href=«ссылка на документ»>
<AREA оформление следующей области ссылки>
....................
<AREA оформление последней области ссылки>
</MAP>
Как видно, каждая область ссылки оформляется в отдельном теге AREA в виде фигуры определенной формы с заданными координатами. Этот тег не имеет конечного тега. Атрибуты тега <AREA> представлены в следующей таблице.
| Атрибут | Назначение атрибута |
| shape | Форма фигуры: Circle (круг) Rect (прямоугольник) Poly (многоугольник) |
| coords | Координаты фигуры: Для круга точки центра (X,Y) и радиус R Для прямоугольника Точки X1,Y1 верхнего левого угла Точки X2,Y2 нижнего правого угла Для многоугольникаточки (X,Y) каждого из его углов |
| href | Адрес ссылки на документ или на якорь в данном документе |
| nohref | Используется, если нет ссылки на документ |
| alt (не обязательный) | Если браузер не поддерживает карты, то вывести хотя бы текст. |
Описанную с помощью тега <MAP> карту можно хранить как в отдельном файле, так и внутри данного файла. Для указания места размещения карты служит знакомый нам тег <IMG>.
Если карта описывается в том же файле, что и код главной страницы, то тег <IMG> имеет вид: < IMG src = "имя_файла.gif"usemap =«# имя_карты»>
Если данные о карте описываются в отдельном файле, например map.html, то тег <IMG>имеет вид:
< IMGsrc = "имя_файла.gif"usemap="map.html # имя_карты" border=0>
Атрибут usemap говорит о том, что карта клиентская и значит, будет обрабатываться браузером.
Обратите внимание, что имя_карты в этом атрибуте точно совпадает с именем указанным в атрибуте name тега <MAP>.
Кроме этого, проверьте правильность всех ссылок указанных в атрибуте src тега IMG и в атрибуте href тегов <AREA>.
Файл имя_файла.gif можно создать в MS Photo Editor, или в MS Office, или с помощью стандартной программы Paint.
Рассмотрим пример по оформлению клиентской карты, взяв за основу html-документ soderganie.htm из предыдущей темы, посвященной кадрам и заменим в нем теги < А> на теги <AREA>, оформленные внутри одного тега <МАР>. Каждую область AREA оформим в виде прямоугольника с заданными координатами и адресом URL для перехода на указанный в области файл:
<HTML>
<HEAD>
<TITLE> оглавление </TITLE>
<BASE target="data">
</HEAD>
<BODY>
содержание
<MAP name="cart1">
<AREA shape="rect"
coords="40, 70, 187, 94"
href="tabel.htm"
alt="таблица доходов">
<AREA shape= "rect"
coords= "40, 130, 187, 154"
href="liste.htm"
alt="список должников">
<AREA shape="rect"
coords="40,180,187,204"
href="image.htm"
alt="здание фирмы">
</MAP>
<IMG src="map.gif" usemap="#cart1" border=0>
</BODY>
</HTML>
Сайт, представленный в виде клиентской карты, выглядит достаточно привлекательно. Карты-изображения хорошо использовать, в том случае, когда одно изображение нужно разбить на фрагменты и, щелкая мышью по этим фрагментам, более детально их рассматривать. Например, создать карту страны или картуавтомобиля и, щелкая мышью по некоторой местности страны или определенной детали машины, узнать больше о ней.
Не нашли, что искали? Воспользуйтесь поиском: