|
|||||||
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция |
Окружность
Ну и последняя "красная кнопка" она у нас круглая.. значит форма области будет круглой shape= "circle". На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R - это длина радиуса в пикселях.
Вот рисунок: Определим фиксированные размеры рисунка-карты атрибутами width и height Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title. Избавимся от рамки бордюра.. сделаем border="0"..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..) В конце должно выглядеть примерно вот так: <html> <head> <title>Навигационная карта</title> </head> <body> <center> <img src="karta.jpg" usemap="#panel" width="300" height="100" border="0" alt="Панель управления" title="Панель управления"> </center> <map name="panel"> <area href="primer1.html" shape="rect" coords="15,15,82,82" alt="Зелёная кнопка" title="Зелёная кнопка"> <area href="primer2.html" shape="poly" coords="148,15,185,82,110,82" alt="Жёлтая кнопка" title="Жёлтая кнопка"> <area href="primer3.html" shape="circle"coords="250,50,33" alt="Красная кнопка" title="Красная кнопка"> </map> </body> </html> "Не область" Рассмотрим на примере. предположим необходимо изготовить вот такую кнопку: Как быть с отверстием в ней? Тег <area> помимо атрибута href имеет противоположенный по значению атрибут nohref - неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении "отверстия" в нашей карте. Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты: Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега <map> указана первой
Следовательно, пример будет иметь такой вид: <html> <head> <title>Навигационная карта</title> </head> <body> <center> <img src="karta2.jpg" usemap="#panel2" width="150" height="150" border="0" alt="Панель управления"> </center> <map name="panel2"> <area nohref shape="circle" coords="76,74,35" title="дырка"> <area href="primer5.html" shape="rect" coords="25,22,126,124" title="Дырявая кнопка"> </map> </body> </html> Пояснения: В качестве страниц primer1.html оформлена своё фамилия имя отчество с новой строки в виде списка с закрашенным круглешком (диск), фон зеленый. Страница primer2.html описан ваш режим дня в виде списка с квадратиками, цвет фона желтый. Страница primer3.html оформлена ваша подгруппа в виде списка римских цифр, цвет фона красный. Страница primer5.html расположена обычная таблица, в которой перечислено расписание 2 дней. САМОСТОЯТЕЛЬНО!!! Сделать несколько страниц с картой сайта. Каждый ученик делает свою карту сайта. Можно использовать любое изображение, картинку, фото. Карта должна переходить на 3 страницы. Поиск по сайту: |
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.004 сек.) |