Динамическое отображение текста веб-страницы
Рис. 7.14. На этой странице изначально не видно ни одного из рассказов
Теперь еще одна маленькая деталь. Хорошо бы сделать так, чтобы мнимая гиперссылка на тот текст, который уже отображается на экране, в выглядела бы, как гиперссылка. Этого легко достичь, поскольку вид определен как класс в таблице стилей. Итак, определим еще один класс для “посещаемой в данный момент” части страницы:
.Ink() { color: rgb(29, 29, 24); text-decoration: none; cursor: default; }В данном случае мы определили внешний вид текущего текста таким же, как вид обычного текста, однако можно было придумать и какое-нибудь особое начертание). Теперь модифицируем наши функции show_ivan() и show_hammer() так, чтобы они изменяли класс (а значит, и внешний вид) наших мнимых гиперссылок:
function show_hammer() { document.all.rasskaz.innerHTML = hanimer; document.all.ivanink.className = "lnk"; document.all.hammerlnk.className = "lnk0"; } function show_ivan() { document.all.rasskaz.innerHTML = ivan; document.all.ivanink.className = "lnk0"; document.all.hammerlnk.className = "lnk"; }Обратите внимание на то, что для доступа к атрибуту CLASS= нужно использовать свойство className, а не class, поскольку слово class является зарезервированным ключевым словом JavaScript.
Разумеется, если на странице сменяют друг друга не два, а три, четыре, десять или более подобных текстов, можно действовать точно так же. Однако здесь есть две тонкости.
Во-первых, при наличии, например, 100 сменяющихся текстов, при щелчке на одной из мнимых гиперссылок нужно определить, какой из них нужно вернуть внешний вид гиперссылки (класс Ink). Придется опреде лить глобальную переменную и каждый раз записывать в нее имя использованной ссылки. Например, если назвать эту переменную, допустим, oldink, то наша функция show_hammer() приобретет такой вид:
function show_hammer() { document.all.rasskaz.innerHTML = hammer; document.all[oldink].className = "lnk"; document.all.hammerlnk.className = "lnk0"; oldlnk = 'hammerlnk'; }При этом лучше сразу при инициализации присвоить переменной oldink имя одного из идентификаторов, чтобы не делать лишнюю проверку, не является ли oldink пустой строкой. Да и вообще, если сменяющихся текстов много, лучше не писать для отображения каждого отдельную функ цию, а просто написать обобщенную функцию show(), которая может полу чать идентификатор ссылки в качестве аргумента или даже просто брать его из значения свойства window.event.srcElement.
Вторая тонкость заключается в следующем. Не забывайте, что все тексты при данном подходе загружаются из Интернета сразу (а щелчки на мнимых гиперссылках только управляют их отображением). Поэтому при большом их количестве на странице при первоначальной загрузке не будет отображено вообще ничего, пока они все не загрузятся. Для пользователя это может означать длительное ожидание перед пустым экраном, то есть весьма сомнительное удовольствие. Лучше попытаться этого избежать. Например, можно расположить эти тексты уже после тега <BODY> – тогда они начнут загружаться одновременно с отображением страницы, и пользователь вместо ожидания перед пустым экраном сможет за время загрузки почитать вступительный текст, а то и текст первого рассказа. Другим выходом может стать загрузка текстов по мере необходимости. Для этого можно применить, например, фреймы.