Иллюстрированный самоучитель по созданию сайтов

Подсказка для читателя


И в качестве последнего штриха давайте добавим подсказку для пользователя. Пусть, когда он начнет прокручивать страницу вручную (с помощью полосы прокрутки), в строке состояния отобразится такая подсказка: Вы можете перемещаться к нужной букве, используя клавиатуру'. Это можно сделать, используя обработчик событий, реагирующий на прокрутку страницы (есть и такой!). Он называется onScroll:

<BODY onKeyPress="press ()" onKeyDown="this.style.color='gray'" 'Вы можете перемещаться к нужной букве, используя клавиатуру''">

Кстати, один раз появившись, подсказка так и останется в строке состояния, но в данном случае в этом нет ничего плохого. Строка состояния — место не самое заметное, так что подсказка в ней выглядит вполне корректно. Вот чего делать не надо, так это использовать бросающиеся в глаза методы типа alert:

<BODY onKeyPress="press ()" onKeyDown="this.style.color='gray'" onKeyUp="this.style.color='black'" onScroll="alert('Вы можете перемещаться к нужной букве, используя клавиатуру'')">

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

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

<В>

и

</В>

. Вместо этого для тега

<DT>

заранее определено стилевое свойство font-weight: bold;.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<HTML>

<HEAD>

<TITLE>Словарь терминов</ТIТLЕ>

<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html" CHARSET="windows-1251">


<STYLE> BODY ( background-color: #EAEAEA; color: black;

} A:link, A:active, A:visited { color: #7A3F51;}

DT { font-weight: bold; } </STYLE>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

<!--

function press () switch(window.event.keyCode)

{ case 1072: case 102: document.all.BukvaA.scrollIntoView() ;

break; case 1073: case 44: document.all.BukvaB.scrollIntoView() ;

break; case 1074: case 100: document.all.BukvaV.scrollIntoView () ;

break; case 1075: case 117: document.all.BukvaG.scrollIntoView() ;

document.all.BukvaD.scrollIntoView() ;

break; case 1077: case 116: document.all.BukvaE.scrollIntoView() ;

break; default:

document.all.Top.scrollIntoView() ; break;

} }

//-->

</SCRIPT>

</HEAD>

<BODY onKeyPress="press()" onKeyDown="this.style.color='gray'" onKeyUp="this.style.color='black'" onScroll="window.status= 'Вы можете перемещаться к нужной букве, используя клавиатуру!'">

<Н1><А NAME="Top">Cловарь терминов</А></Н1>

<HR ALIGN="left" WIDTH="40%">

<НЗ> <А HREF="#BukvaA">A</A>

<А HREF="#BukvaB">Б</A> <А HREF="#BukvaV">B</A>

<А HREF="#BukvaG">Г</A> <А HREF="#BukvaD">Д</A>

<А HREF="#BukvaE">E</A> </НЗ> Для перемещения к соответствующей букве вы можете использовать клавиатуру

<HR ALIGN="left" WIDTH="40%">

<Н1><А NAME="BukvaA">A</A></Hl>

<DL> <DT><A NAME="avtentich">AБTEHTИЧECKИЙ КАДАНС</А>

<DD>кадансовый оборот, в котором заключительная тоническая гармония предваряется доминантовой

<DT>

<A NAME="aliquot">AЛИKBOTHЫE СТРУНЫ</А>

<DD>резонирующие струны, к которым исполнитель не прикасается во время игры



<DT><A NAME="atakta">ATAKTA</A>

<DD> гармонический элемент на басу нижнего или верхнего вводного тона

</DL> <SMALLXA HREF="#Top">B начало</А>

</SМАLL> <HR ALIGN="'left" WIDTH="40%">

<H1><A NAME="BukvaB">Б</A></Hl>

<DL> <DT><A NAME="bagatel">БАГАТЕЛЬ</A>

<DD>небольшая нетрудная для исполнения пьеса <DT>

<A NAME="bartok">БAPTOKOBCKOE ПИЦЦИКАТО</А>

<DD>сильный щипок струны с последующим ударом о струны о гриф <DT>

<A NAME="bonang">БОНАНГ</A> <DD>Ha6op из 10-12 гонгов разного размера </DL>

<SMALL><A HREF="#Top">B Haчaлo</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaV">B</A></Hl> <DL>

</DL> <SMALL>

<A HREF="#Top">B Haчaлo</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaG">Г</A></Hl>

<DL> </DL> <SMALL><A HREF="#Top">B Haчano</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaD">Д</A></Hl>

<DL> </DL>

<SMALL><A HREF="#Top">B Haчaлo</A></SMALL>

<HR ALIGN="left" WIDTH="40%">

<H1><A NAME="BukvaE">E</A></Hl>

<DL></DL> <SMALL>

<A HREF="#Top">B начало</A></SMALL>

</BODY>

</HTML>

Итак, мы познакомились со всеми основными обработчиками событий. Конечно, существуют и другие обработчики, но они применяются реже.


Содержание раздела