- •Гиперссылка в пределах html страницы
- •Почтовая гиперссылка
- •Id, class Общие Идентификаторы элемента
- •Ismap Кроме msie Указывает, что должна быть использована серверная карта объекта
- •Id, class Общие Идентификаторы элемента
- •Id, class Общие Идентификаторы элемента
- •Id, class Общие Идентификаторы элемента
- •2011-06-05 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !
- •Билет 13 Виды селекторов: селектор групп, классовые селекторы, id-селекторы.
- •Билет 14 Способ применения css – встраивание
- •2.4.4.1. Создание запроса на выборку с помощью Мастера
- •2.4.4.2. Создание запроса на выборку с помощью Конструктора
Id, class Общие Идентификаторы элемента
title, style Общие Определяет заголовок и стиль элемента
shape - Определяет геометрическую фигуру активной области. Допустимые значения: default, rect, circle, poly (точка, прямоугольник, круг, произвольный многоугольник)
coords Возможные значения зависят от типа фигуры Определяет координаты активной области в пикселях. За точку отсчета (0,0) принимается верхний правый угол. Смещение по горизонтали – первое число, по вертикали – второе
href - Задает URI, на который ссылается определяемый регион
nohref - Указывает, что данный регион ссылкой не является
alt Обязательный атрибут Указывает текст, который должен быть показан в качестве ссылки, если браузер не может выводить изображения
target - Указывает имя окна (фрейма), в котором должен быть открыт документ, указанный в HREF
tabindex, accesskey Оба атрибута не поддерживается Netscape 4, а accesskey – и Opera Определяют порядок следования ссылок на карте (при использовании перехода между ними при помощи клавиатуры) и «горячую клавишу» для быстрого перехода к ссылке соответственно
onfocus, onblur Общие Определяют действие, которое должно произойти в момент получения и потерю той частью изображения, что является ссылкой, фокуса ввода
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup Общие Определяют действие, которое должно быть выполнено в ответ на соответствующее действие пользователя
Остановимся подробнее на атрибутах SHAPE и COORDS, уже знакомых нам по элементу A. В случае использования этих атрибутов в паре с элементом AREA, по сути ничего не меняется: SHAPE все так же отвечает за тип области, а COORDS задает координаты. Допустимые значение атрибута COORDS зависят от того, какой тип области был указан в SHAPE:
rect – левый x, верхний y, правый x, нижний y;
circle – центр x, центр y, радиус;
poly – набор пар x и y, описывающий каждую вершину многоугольника.
Рассмотрим использование данных параметров на практике, обратившись к листингу 2.37.
Листинг 2.37. Карта изображения
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Карты изображений</title>
</head>
<body>
<img src="comp.jpg" alt="Компьютер" border="0" usemap="#map1" />
<map name="map1">
<area href="computer.html" title="Системный блок" alt="" shape="rect" coords="18,32, 114,223" />
<area href="display.html" title="Монитор" alt="" shape="rect" coords="126,31, 305,179" />
<area href="mouse.html" title="Мышь" alt="" shape="circle" coords="211,247, 14" />
<area href="keyboard.html" title="Клавиатура" alt="" shape="poly" coords="144,197, 323,209, 308,234, 120,222" />
</map>
</body>
</html>
Здесь мы определили карту для изображения компьютера с монитором, мышью и клавиатурой, состоящую из 4 областей, 2 из которых являются прямоугольниками, одна – кругом, и еще одна – четырехугольным многоугольником. Каждая из областей соответствует объекту на фотографии (рис. 2.27).
Рис. 2.27. Изображение с картой. Границы областей проходят по контурам системного блока, обрамления монитора, по краям клавиатуры и вокруг центра мышки
Мы не случайно отметили, что атрибуты AREA сходны с атрибутами элемента A. И действительно, для создания карт изображений допустимо использовать любой из этих элементов. Так, такая же карта, построенная при помощи элементов A, будет выглядеть следующим образом:
<map name="map1">
<a href="computer.html" shape="rect" coords="18,32, 114,223">Системный блок</a>
<a href="display.html" shape="rect" coords="126,31, 305,179">Монитор</a>
<a href="mouse.html" shape="circle" coords="211,247, 14">Мышь</a>
<a href="keyboard.html" shape="poly" coords="144,197, 323,209, 308,234, 120,222">Клавиатура</a>
</map>
При этом содержимое, вложенное в контейнер MAP, будет отображаться в браузере (в данном случае под изображением будут выведены 4 ссылки), что, в целом, улучшает доступность страницы, например, для случая, если изображение по каким-либо причинам не может быть загружено. Более того, если для внедрения изображения используется не пустой элемент IMG, а контейнер OBJECT, то карту можно поместить в качестве его содержимого:
<object data="comp.jpg" type="image/jpeg" usemap="#map1" />
<map name="map1">
<a href="computer.html" shape="rect" coords="18,32, 114,223">Системный блок</a>
...
</map>
</object>
Однако проблема состоит в том, что такой синтаксис на данный момент поддерживается лишь в браузерах Opera, Chrome и Firefox 2.0 и выше, в то время как MSIE и ранние версии Mozilla игнорируют построенные с использованием элемента ссылок навигационные карты. Более того, если вы вложите карту в OBJECT, то Internet Explorer ее вообще проигнорирует, даже если она будет определена с использованием элементов AREA. Различные варианты связывания карт с рисунками и объектами можно посмотреть в файле imap2.html.
Свойства AREA и MAP
Закрывающий тег: AREA – нет, MAP – обязательно.
Совместимость: все.
Вложение: недопустимо.
Уникальный: нет.
Элемент MARQUEE
Хотя по своей сути элемент MARQUEE и не является объектом, набор его атрибутов, а также специфика применения вполне позволяют рассматривать его в таком контексте. В свое время этот элемент был ответом Microsoft на другое фирменное расширение – BLINK. Отличие состоит в том, что MARQUEE заставляет текст не мигать, а прокручиваться из стороны в сторону:
<marquee direction="left">Едем влево!</marquee>
В данном случае мы определили, что строка «Едем влево» должна двигаться слева направо. Впрочем, внутрь контейнера MARQUEE может быть помещен не только текст, но и любое другое содержимое, включая рисунки, таблицы и т.д.:
<marquee direction="up" behavior="alternate">
<img src="fox.jpg" width="120" height="150" />
<iframe src="fox.txt">Про лису</iframe>
</marquee>
В данном же случае мы получаем блок, состоящий из рисунка и плавающего фрейма, который будет дергаться вверх-вниз. Такое поведение задано при помощи пары атрибутов – DIRECTION, определяющим направление и BEHAVIOR, отвечающим за тип перемещения. Эти и все оставшиеся атрибуты приведены в таблице 2.41.
Таблица 2.41 Атрибуты элемента MARQUEE
Атрибут Примечание Описание