Ролловеры. Карты Ролловеры
Под термином "ролловер" в веб-дизайне понимают визуальный элемент (например, кнопку), меняющий свой вид таких действиях указателя мыши как наведение и нажатие. Элементы навигации в лабораторной работе 2 можно считать ролловерами, однако часто ролловеры полностью меняют изображение, а не только цвет. Разумеется, этого можно достичь теми же средствами, т.е. определить различные фоновые изображения ролловера в различных состояниях (для гиперссылки, например, таких состояний четыре - link, visited, hover и active). Однако сменное изображение, загружаясь впервые, создаст ощутимую задержку, что нежелательно. Возможность регулировать позицию фонового изображения предоставляет возможность решения этой проблемы: изображения для всех состояний объединяются в одно, и при смене состояния ролловера меняется только позиция единственного фонового изображения.
a {
background-image: url(A_rollover_bg.png);
background-repeat: no-repeat;
display: block;
min-height: 27px;
padding-top: 4px;
padding-left: 35px;
font-size: 16px;
text-decoration: none;
}
a:visited {
background-position: 0 -81px;
}
a:hover {
background-position: 0 -54px;
text-decoration: underline;
}
a:active {
background-position: 0 -27px;
}
div {
width: 230px;
}
...
<p>
Для гиперссылок в данном примере определено единственное фоновое изображение.
Четырём различным состояниям, определённым для гиперссылки (link, visited,
hover и active), которым в CSS 2 соответствуют псевдоклассы, назначены
разные позиции этого изображения (background-position).</p>
<div>
<a href="#">link - (0; 0) </a>
<a href="#">active - (0; -27px) </a>
<a href="#">hover - (0; -54px) </a>
<a href="#">visited - (0; -81px) </a>
</div>
Листинг 8.5. Использование изображений-ролловеров в меню (html, txt)
Рис. 8.6. Использование изображений-ролловеров в меню
Упражнения.
Что будет, если текст ссылок сделать существенно длиннее? А если убрать указание ширины контейнера меню?
Измените ассоциации всех состояний ссылки с изображениями (произвольно).
Описанный приём имеет более и широкое применение: множество мелких изображений (маркеров, пиктограмм и т.п.) обычно рационально заменить одним составным, регулируя отображаемую часть средствами позиционирования фоновых изображений. Это сокращает число запросов к веб-серверу при загрузке документа.
Атрибуты ismap и usemap
Сообщают браузеру, что изображение представляет собой "навигационную карту", содержащую одну или несколько гиперссылок, которые пользователь может выбирать мышью. Атрибут ismap указывает на серверную навигационную карту и может определяться только в элементе <а>:
<а href="images/map2.aspx"> <img src="images/map2.gif" ismap="ismap" /> </а>
Браузер автоматически посылает серверу координаты мыши относительно левого верхнего угла изображения, когда пользователь щелкает где-то на изображении ismap. Специальная программа на сервере может затем употребить эти координаты при создании ответа.
Атрибут usemap обеспечивает механизм клиентской навигационной карты. В этом случае браузер на компьютере пользователя преобразует координаты щелчка на изображении в некоторое действие, например, загрузку и отображение другого документа.
<img src="RegPageUml.jpg" alt="Web Diagram" usemap="#map1" />
<map name="map1">
<area shape="rect" coords="13,8,87,71" href="http://www.w3schools.com/html/html_intro.asp" title="HTML page" alt="HTML page" />
</map>
Листинг 8.6. Клиентская навигационная карта (html, txt)
Рис. 8.7. Клиентская навигационная карта
Упражнение. Создайте ещё две области в навигационной карте - они должны ссылаться на страницы http://www.w3schools.com/TAGS/tag_form.asp и http://www.w3schools.com/JS/default.asp. Пусть одна из них будет круглой.