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

Окружность

Читайте также:
  1. Сопряжения прямой с окружностью

Ну и последняя "красная кнопка" она у нас круглая.. значит форма области будет круглой 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 страницы.


1 | 2 | 3 |

Поиск по сайту:



Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Студалл.Орг (0.004 сек.)