- •Саратовский государственный технический университет
- •Часть 2. Создание web-страниц с использованием Java Script
- •Часть 3. Создание интерактивного web-приложения на основе технологии «клиент-сервер» с использованием графического интерфейса
- •Литература
- •Введение
- •1. Просмотр web-страниц
- •2. Основные сведения о языке html
- •3. Структура документа html
- •4. Форматирование текста
- •5. Управление цветом
- •6. Элементы, расширяющие возможности языка
- •6.1.Горизонтальная линия
- •6.2.Бегущая строка
- •7.Вставка гипертекстовых ссылок
- •7.1. Вставка графического изображения в ссылку
- •7.2. Локальные ссылки внутри документа
- •8. Размещение графических и видеоизображений
- •8.1. Сегментированные графические изображения - ссылки
- •Прозрачные изображения
- •Вставка видеофрагментов
- •9.Таблицы
- •Заголовок таблицы
- •10.Фреймы
- •Плавающие фреймы
- •11.Формы
- •Практическая часть
- •Содержание отчета
- •Литература
8.1. Сегментированные графические изображения - ссылки
С помощью тега <IMG> можно создавать графические изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называют сегментированными изображениями, или картами.
Конфигурацию карты определяет тег <MAP> .. </MAP>.
Этот элемент необходим для общего определения карты. Тег <MAP> имеет атрибут, задающий имя карты: name= ‘’Имя’’.
Между тегами <MAP> и </MAP> определяются области карты при помощи тега <AREA>. Для каждой области карты должен быть создан свой элемент AREA. Он не имеет конечного тега. Тег <AREA> должен включать следующие атрибуты:
href= ‘’Адрес ссылки’’ - определяет ссылку (эквивалентен атрибуту href в теге <A>).
alt= ‘’Текст подсказки’’ - задает текст, заменяющий изображение карты, если оно не может быть выведено. Является необязательным.
Форму области на карте определяет обязательный атрибут shape, а обязательный атрибут coords задает координаты этой области.
Существует три стандартных вида областей:
1.Круг : shape=’’circle’’ coords=X,Y,R.
Здесь X и Y - координаты центра круга, а R - радиус, выраженные в пикселах. Координаты центра отсчитываются от левого верхнего угла рисунка, на который накладывается карта.
2.Прямоугольник : shape=’’rect’’ coords=X1,Y1,X2,Y2.
Здесь X1 и Y1 - координаты левого верхнего, а X2 и Y2 - правого нижнего угла прямоугольника (в пикселах).
3.Многоугольник : shape=’’poly’’ coords=X1,Y1,X2,Y2,..XN,YN,
где (X1,Y1), (X2,Y2),..(XN,YN) - координаты каждого из углов многоугольника.
После того, как карта описана в теле HTML - документа (в любом месте после тега <BODY>), её можно использовать в теге <IMG> с помощью атрибута usemap: usemap= ‘’# Имя’’. Это имя должно соответствовать значению атрибута name в теге <MAP>.
В качестве значения параметра src в теге <IMG> указывается имя и, если это необходимо, путь к файлу графического изображения, на которое накладывается карта:
<IMG src=’’pict1.gif’’ usemap=’’#karta1’’ alt=’’ Карта № 1’’>
Приведем пример HTML - документа, содержащего в себе карту двух областей разной формы:
<HTML>
<HEAD>
<TITLE> Лабораторная работа № 4 </title>
</head>
<BODY bgcolor=’’#FFFFFF’’ text=’’#000000’’ link=’’#0000FF’’
vlink=‘’#FF0000’’>
<CENTER> <H2> Пример карты </h2> </center>
<MAP name=’’karta1’’>
<AREA alt = ’’ Круг’’ shape = ’’circle’’ coords=’’119,114,83’’
href=’’http://www.sstu.runnet.ru’’>
<AREA alt =’’ Многоугольник’’ shape =’’poly’’
coords=’’74,242,180,250,249,239,242,278’’ href=’’C:\HTM\f1.htm’’>
</MAP>
. . .
<IMG src= ‘’flowers .gif’’ usemap=’’#karta1’’ alt=’’ Карта - цветы‘’>
</body>
</HTML>
Переходы, выполняемые с помощью карты, могут происходить как внутри страницы, так и к удаленному ресурсу.
Прозрачные изображения
Документ HTML может включать в себя прозрачные изображения, то есть такие рисунки, которые не имеют рамки и накладываются на фон, сливаясь с документом. Только один цвет в изображении может быть прозрачным (обычно это цвет фона). Для создания прозрачного изображения вы должны подготовить рисунок с помощью графического редактора, такого как MS Photo Editor, HoTMetaL PRO 3 или GIF Construction Set (пробную версию последнего можно загрузить из Internet по адресу http://www.mindworkshop.com), а затем вставить его в документ с помощью элемента <IMG> точно также, как и обычное графическое изображение.