<< Пред. стр.

стр. 19
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

выглядит не полностью вклю-
руг кнопки;
ченным);
• Подтолкнуть всю кнопку целиком
• Создать анимацию быстрой
или только текстовую метку внут-
вспышки цвета в элементе, кото-
ри кнопки;
рый изменили или добавили в сос-
тояние onMouseOver;
• Подчеркнуть текстовую метку;
• Добавить маркер к текстовой мет-
Добавить маркер с левой стороны

текстовой метки; ке (если он не был еще добавлен в
состоянии onMouseOver);
• Изменить форму или размер мар-
кера текстовой метки (если мар- • Добавить подчеркивание текс-
кер присутствует в состоянии по товой метки (если оно не бы-
умолчанию); ло 'добавлено в состояние
onMouseOver).
• Увеличить размер кегля текста
метки.


Совет
Подойдите творчески к разработке дизайна для состояния
onMouseOver, поскольку то, что мы хотим сделать, заключается в
подсвечивании кнопки. Серьезно отнеситесь к состоянию onCl ickn
используйте типичную кнопочную метафору нажатия - т.е. сделайте
так, чтобы кнопка выглядела нажатой, и не важно к какой оригиналь-
ной идее вы пришли для состояния onMouseOver. Имитация нажатия
кнопки является самым наглядным способом сообщить посетителям,
что они только что активировали кнопку.



Совет
Не используйте дизайн нажатой кнопки для состояния onMouseOver,
поскольку он наводит посетителя на мысль, что кнопка была активи-
рована (т.е. на ней щелкнули), хотя на самом деле она была только
подсвечена. Поберегите дизайн нажатых кнопок для состояния
onclick для сайтов, построенных по технологии Flash.
ГЛАВА гг.
Создание ролловерной графики
Ролловерная графика - это изображения, которые изменяют свой вид, когда посе-
титель наводит на них указатель мыши. Этот эффект на самом деле является неким
волшебным фокусом, поскольку само изображение не изменяется. Вместо этого су-
ществует два отдельных файла изображения, и JavaScript-функция вытягивает преды-
дущее состояние, меняя местами эти два изображения в зависимости от позиции ука-
зателя мыши.


Определение
Ролловерная графика - это изображение, которое изменяет свой
вид, когда посетитель наводит на него указатель мыши.



Итак, для создания ролловерной графики необходимы три вещи:
1. Файл изображения по умолчанию или нормальное состояние ролловера;;
2. Файл изображения для состояния onMouseOver или изображение, кото-
рое появляется, когда посетитель наводит указатель мыши на ролловер;
3. JavaScript-функция, выполняющая смену изображений.
Для ролловера можно использовать любые два файла изображений. Они не обяза-
тельно должны выглядеть похожими. Они даже не обязаны иметь одинаковые физи-
ческие размеры. И все-таки, ролловеры работают лучше всего, когда графические
файлы являются различными версиями одного и того же изображения с одинаковы-
ми размерами. Ролловерный эффект создает таким образом некий вид анимации, и
вы получаете лучшую последовательность, поскольку у посетителя не создается впе-
чатление, что изображение по умолчанию пропадает или радикально изменяется.


Совет
Ролловерная графика отлично подходит для кнопок навигационной
панели. Дополнительная визуальная обратная связь, благодаря рол-
ловерному эффекту, усиливает ощущение, что на кнопке можно
щелкнуть.


JavaScript-функция является секретным ингредиентом, заставляющим работать роло-
вер. В основе функции лежит чрезвычайно полезный метод getElementByld, кото-
рый поддерживается самыми последними версиями наиболее популярных браузеров.
Все достаточно просто: функция находит изображение, которое вы желаете сменить
на другое, по его коду идентификатора, и затем изменяет источник этого изображе-
ния с версии по умолчанию на версию для состояния onMouseOver, или с версии для
состояния onMouseOver обратно на версию по умолчанию.
181
ГЛАВА 33. Создание роловерной графики


Совет
Для получения наилучших результатов всегда указывайте значения
атрибутов width и height тега img ролловерной графики. В таком
случае, если изображение для состояния onMouseOver будет иметь
другие размеры, чем изображение по умолчанию, браузер изменит
размеры изображения для состояния onMouseOver, чтобы они соот-
ветствовали размерам изображения по умолчанию. Иначе браузер
вставит изображение для состояния onMouseOver как есть и пере-
рисует весь экран целиком. И еще более неприятно, если изменение
размеров привело к тому, что указатель мыши оказался за предела-
ми области изображения для состояния onMouseOver; ролловерная
функция автоматически возвратит обратно изображение по умолча-
нию, и вы получите стробоскопический эффект.

Ролловерную функцию вызывают два различных события языка JavaScript. Событие
onMouseOver переключает состояние по умолчанию на состояние, когда над изобра-
жением наведен указатель мыши, а событие onMouseOut переключает состояния об-
ратно. Если бы не было события onMouseOut для возврата к обычному состоянию,
ролловерное изображение застряло бы на состоянии, когда указатель мыши наведен
над изображением, независимо от того, куда посетитель переместил указатель мыши.

Инструментарий Ролловерная графика
Данный DHTML-документ демонстрирует создание ролловерно-
го эффекта. <html>
<head>
<title>Rollover Graphics</title>
<script language="JavaScript">
function doRollover(imagelD, imageSource) {
/* Эта функция принимает два параметра: imagelD (ID
изображения, которое вы хотите заменить) и
imageSource (путь к файлу изображения, на которое
вы хотите произвести замену). Единственная
инструкция языка JavaScript использует оба пара-
метра для выполнения трюка. */
document.getElementById(imagelD).src = imageSource;


</script>
</head>
<body>
<!— Для этой'демонстрации здесь используется только
одно ролловерное изображение, однако тело документа
можно заполнить любым желаемым содержимым. —>
Строим Web-сайты
182

<img id="imageid"
Инструментарий
s гс = "imagepath"
width="imagewidth"
height="imageheight"
onMouseOver="doRollover( 'rolloverid' ,
'mouseoverimagepath');"
'default-
onMouseOut="doRollover('rolloverid',
imagepath');">
<!— Примечания:
imageid - это уникальная строка, идентифицирующая
изображение, например, imgOl или happyface. Каждо-
му изображению на странице присваивайте различные
идентификаторы.
imagepath - это путь к изображению, например,
images/icecream.jpg. Этот путь может быть путем от-
носительно документа, путем относительно корня или
абсолютным путем.
imagewidth и imageheight - это ширина и высота
изображения в пикселах.
rolloverid - это идентификатор целевого изображе-
ния, которое является изображением для замены с мс-
пользованием ролловерной функции. Для обычнсго
ролловера, rolloverid совпадает с imageid. Для
разъединенного ролловера, rolloverid является
идентификатором любого изображения, которое вы хо-
тите изменить. Обязательно заключайте это значение
в одинарные кавычки.
mouseoverimagepath - это путь к версии изображен л?
для состояния, когда указатель мыши наведен на
изображение, например, i images/icecream_ro.jpg.
Путь может быть путем относительно документа, пу-
тем относительно корня или абсолютным путем. Зак-
лючайте весь путь в одинарные кавычки.
defaultimagepath - это путь к версии изображения по
умолчанию. Опять-таки, путь может быть путем отно-
сительно документа, путем относительно корня или
абсолютным путем, и обязательно заключайте весь
путь в одинарные кавычки. Для обычного ролловера,
defaultimagepath совпадает с imagepath. Для разъе-
диненного ролловера, defaultimagepath совпадает со
значением атрибута src целевого изображения.
—>
</body>

</html>
ГЛАВА 33. Создание роловерной графики 183


Совет
Эту же функцию можно использовать для создания разъединенного
ролловера, или изображения, которое инициирует роловерный эф-
фект не для себя, а абсолютно другого изображения. Чтобы сделать
это, определите события onMouseOver и onMouseOut в инициирую-
щем изображении, но в качестве параметра функции укажите иден-
тификатор изображения, которое вы хотите изменить, а не собствен-
ный идентификатор инициирующего изображения.



Совет
Несколько слов по терминологии: окажите себе услугу и назовите
изображение для состояния onMouseOver так же, как и изображение
по умолчанию, добавив суффикс, например, __го или jbver. Так, если
изображение по умолчанию называется button.gif, изображение для
состояния onMouseOver будет называться button_ro.gif или
button_over.gif. Это поможет вам отслеживать изображения.
Конечно, различные дизайнеры имеют различные предпочтения по
именованию своих изображений. Один из редакторов данной книги
предпочитает систему, подобную следующей: имя NavHomeOff.gif
для изображения по умолчанию и имя NavHomeOn.gif для ролловера.
Используйте любую систему, которая имеет для вас смысл. Но все
дизайнеры согласны, что необходимо использовать либо ту, либо
другую систему.
Об идентификаторах: если вы не можете определить, какие иденти-
фикаторы использовать, просто воспользуйтесь общим префиксом,
например, img, и пронумеруйте ваши изображения подобным обра-
зом: imgO1, imgO2, imgO3 и так далее. В качестве идентификаторов
можно использовать имена файлов изображений, но только в том
случае, если такое изображение встречается на странице всего
один раз. Помните, каждое изображение должно иметь уникальный
идентификатор.
ГЛАВА 34.
Повышение доступности изображений
Добросовестные Web-дизайнеры делают свой Web-сайты максимально совместимыми
со средствами специальных возможностей, например, читателями экрана, преобразо-
вателями текст-речь и преобразователями текст-шрифт Брайля, чтобы помочь инва-
лидам по зрению.
Сделать HTML-текст доступным просто - вам вообще ничего не нужно делать для
этого. Средства специальных возможностей достаточно сообразительны, чтобы
отыскать текст на странице и преобразовать его в произносимые слова или шрифт
Брайля. Однако пока не существует технологии для таких средств, позволяющей ис-
следовать содержимое изображения и создать доступное описание. Вам, создателю
Web-сайтов, выпадает участь писать такие описания самому и вставлять их в
HTML-код, чтобы читатели экрана и подобные им могли найти эти описания.
Описание помещается в.значение атрибута a l t тега img, как в следующем коде:
<img src = "neptune. jpg" width="'3OO" height = "150" a l t = "Изображение
планеты Нептун, полученное с помощью космического телескопа Hubble.
Поверхность Нептуна кажется кобальтово-синей яркими полосами серо-
голубых облаков.">


Совет
В качестве дополнительного бонуса, как могут сказать в отделе
рекламы, некоторые поисковые машины специально ищут текст в
атрибуте alt, чтобы более точно индексировать ваш сайт. Поэтому
добавление осмысленного текста для атрибута alt может помочь в
повышении ранга вашего сайта среди результатов поиска.'


Обратите внимание, что в описании не урезаются детали. Идея заключается в предос-
тавлении инвалидам по зрению сопоставимого впечатления об изображении. Это оз-
начает, что мы хотим передать в описании ту же информацию, которую визуально
представляет изображение. Поэтому, когда вы будете добавлять текстовые описания
для атрибута a l t ваших изображений, вообразите, что пишете сочинение. Сделайте
так, чтобы ваше описание вызывало изображение в мысленном взгляде.
В предыдущем примере вы видели, что текст выполняет достаточно хорошую работу
для подачи визуальной информации. Вам нет смысла добавлять описание, подобное
следующему:
<img src = "neptune. jpg" width="300" height = "150" a l t = "ItaaHeTa Неп-
тун " >
Такой немногословный текст может вызвать споры относительно точности данного
описания, поскольку в нем недостаточно деталей для вызова изображения Нептуна в
мысленном взгляде. Инвалиды по зрению, которые уже слышали это описание,
ГЛАВА 34. Повышение доступности изображений 185

вынуждены знать, как выглядит Нептун, чтобы иметь сопоставимое впечатление об
изображении, что доставляет им неудобство, поскольку само изображение не создает
предварительных предположений. Кто-то, кто никогда до этого не видел планету Неп-
тун, может посмотреть на изображение и узнать, как выглядит эта планета, поэтому
ваше описание должно делать то же самое.


Совет
Обязательно предоставляйте текстовые описания для всех изобра-
жений на странице. Для чисто функциональных изображений, напри-
мер, логотипов или кнопок, детальные описания не обязательны:
описания кнопок «О нас» или «Начальная страница» прекрасно спра-
вятся с задачей. Однако непременно предоставляйте очень подроб-
ные описания для иллюстраций, диаграмм, графиков и других изоб-
ражений с содержимым, или для изображений, которые имеют
смысл или раскрывают суть текста на странице.
ГЛАВА 35.
Создание карт ссылок
Карта ссылок - это изображение, содержащее одну или несколько гиперобластей, на-
зываемых гиперобъектами. Каждый гиперобъект функционирует, как отдельная ссыл-
ка. Ссылки могут указывать на различные страницы или выполнять различные скрип-
ты, что делает карты ссылок более полезными, чем обычные старые добрые изображе-
ния со ссылкой, в которых изображение целиком функционирует, как одна ссылка.



Определение
Карта ссылок - это изображение, содержащее один или несколько
гиперобъектов или гиперобластей.



В карте ссылок сам файл изображения не представляет ничего особенного. Можно на-
чать с любого Web-изображения. Превращает изображение в карту ссылок блок
HTML-кода, определяющий форму, положение и функционирование гиперобъектов.
Итак, карта ссылок состоит из двух частей:
1. Самого файла изображения;
2. Блока кода, определяющего гиперобъекты.
Объедините их, и вы получите что-то похожее на рисунок 35.1. Обратите внимание,
что в теге img используется атрибут usemap, который сообщает браузеру, какое опре-
деление карты применить. На странице можно иметь любое число карт ссылок и даже
можно использовать одно и то же определение для абсолютно разных изображени i.

Совет
Поскольку гиперобъекты определяются в HTML-коде, а не в самом
изображении, если разделить изображение и его код, то карта ссы-
лок превратится обратно в обычное старое доброе изображение без
ссылки. Перемещение изображения на другую страницу, без пере-
мещения при этом блока кода, определяющего гиперобъекты, при-
ведет к отображению неактивной карты ссылок.


Листинг 35.1. Просмотр исходного кода для рисунка 35.1
<img src="images/mars.jpg" width="500" height="300" usemap="#mars">
<!— Начало определений гиперобъектов —>
<map name="mars">
<area shape="rect" coords="9,3,164,148" href="mars01.htm">
<area shape="rect" coords="172,2,328,149" href="marsO2.htm">
ГЛАВА 35. Создание карт ссылок 187

<area shape="rect" coords="334,5,487,149" href="marsO3.htm">
<area shape="rect" coords="9,151,163,294" href="marsO4.htm">
<area shape="rect" coords="171,153,327,296"- href=
"marsO5.htm">
<area shape="rect" coords="334,152,488,295' href =
"marsO6.htm">
</map>

< l Конец определений гиперобъектов —>
-



Bis E* Bew Favorlo. Ms H*




Рис. 35.1. Карты ссылок состоят из файла изображения
и блока HTML-кода, определяющего гиперобъекты



Совет
Теги map можно размещать в любом месте HTML-документа, однако
наиболее подходящим местом является конец HTML-документа.
В таком случае вы всегда будете знать, где искать определения карт
ссылок, если понадобится их изменить или переместить на другую
страницу.

Само определение находится между тегами тар. Значение атрибута name тега т а р со-
ответствует значению атрибута usemap тега img, за одним исключением, которое
бросается в глаза: в значении атрибута usemap перед именем определения ставится
символ числа (#), а значение атрибута name не имеет префикса.
Каждый гиперобъект карты ссылок получает свой собственный тег a r e a . Таким обра-
зом, если у нас есть шесть гиперобъектов, как показано на рисунке 35.1, нам понадобит-
ся шесть тегов a r e a . Эти теги a r e a могут идти в любом порядке. Как можно предполо-
жить, атрибуты тега a r e a определяют, где и как будут располагаться гиперобъекты:
Строим Web-сайты
188

Атрибут shape определяет, какая форма гиперобъекта из трех возможных ис-
пользуется: прямоугольник (rect), окружность ( c i r c l e ) или многоугольник
(poly).
Атрибут coords определяет положение и размер гиперобъекта. В зависимости
от значения атрибута shape, значения атрибута coords имеют разный смысл
(обратитесь к таблице 35.1). Левый верхний угол любого изображения имеет
координаты (0,0). Правый нижний угол изображения с размерами 500 на
300 пикселов имеет координаты (500,300).
Атрибут href содержит ссылку гиперобъекта. Его значением может быть путь
к новой странице, или оно может открывать пустое окно электронного сооб-
щения (href="mailto:mars@email.eml") или запускать скрипт
(href =" j a v a s c r i p t :doMars () ; ").


Часто задаваемые вопросы
Как насчет серверных карт ссылок?
В этой главе описываются клиентские карты ссылок, для которых
HTML-код содержит определения гиперобъектов. Также существуют
серверные карты ссылок, для которых определения гиперобъектов
размещаются в отдельном файле на Web-сервере.
Изображения с определениями, размещенными на сервере, меньше
зависят от браузера, и их проще переносить со страницы на страни-
цу, поскольку не нужно заботиться о перенесении блока HTML-кода,
определяющего гиперобъекты. Однако серверные карты ссылок яв-
ляются более громоздкими для программирования. Они не выполня-
ются также быстро, как их клиентские родственники, и их невозмож-
но сделать доступными.
И хотя раньше серверные карты ссылок были стандартом, они почти
исчезли, и теперь все основные браузеры поддерживают клиентские
карты ссылок.



Совет
Название карты ссылок не обязательно должно соответствовать наз-
ванию файла изображения, однако использование одного имени яв-
ляется удобным способом отслеживания, какая карта ссылок соот-
ветствует какому изображению.




Совет
Следите, чтобы ваши области гиперобъектов не перекрывались. Ког-
да случается такая ситуация, браузеры сбиваются с толку и карта

<< Пред. стр.

стр. 19
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>