Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Прямоугольная область






Теперь наша карта приобретает такой вид:

< map name=" panel" >
< area href=" primer1.html" shape=" rect" coords=" 15, 15, 82, 82" >
< /map>

По сути теперь " зелёная" квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

< html>
< head>
< title> Навигационная карта< /title>
< /head>
< body>
< center>
< img src=" karta.jpg" usemap=" #panel" >
< /center>
< map name=" panel" >
< area href=" primer1.html" shape=" rect" coords=" 15, 15, 82, 82" >
< /map>
< /body>
< /html>

Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега < area>.

href=" primer1.html" - здесь думаю понятно, это путь к документу, который должен открыться при нажатии на " зелёную кнопку".

Так как кнопка у нас квадратная, а квадрат как известно это " правильный" прямоугольник, форму области рисунка назначаем прямоугольной shape=" rect".

А теперь самое интересное coords=" 15, 15, 82, 82" - координаты.. Для прямоугольника они задаются двумя точками по принципу " Х1, У1, Х2, У2" Где Х1, У1- первая точка и соответственно Х2, У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0, У=0, а самый нижний правый Х=300, У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape=" rect" для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения " рабочей" области всей кнопки.






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.