Динамическое отображение текста веб-страницы
В этом разделе мы рассмотрим, какими способами можно динамически изменять текстовое содержание страницы. В предыдущих разделах, как вы помните, мы изменяли, как правило, только внешний вид текстовых;элементов (цвет текста, начертание шрифта и т. д.). Однако иногда бывает нужно изменить “на ходу” непосредственно текстовое содержание.
Вообще-то говоря, в разделе 7.2 мы уже один раз немного изменяли текст, но это был текст на кнопке. Если помните, тогда мы меняли надписи Сде лать фон белым и Сделать фон зеленым. Надпись на кнопке изменялась при помощи значения атрибута VALUE= тега <INPUT>. Однако что делать, если текст, подлежащий изменению, не является кнопкой?
Давайте рассмотрим такой пример. Предположим, нам надо несколько усовершенствовать “Домашнюю страницу Сергея Сергеева”, которую мы создавали в Главах 1, 2 и 4. К примеру, нам хочется, чтобы сначала на странице отображался только вступительный текст и текст первого рас сказа. А при нажатии на ссылку вместо текста первого рассказа появлялся бы текст второго рассказа и т. д.
Оказывается, это осуществить очень легко! Заключим для начала текст первого рассказа в блок <DIV> и присвоим ему уникальное имя:
<DIV ID="rasskaz"> <H2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<BR> OPAN STYLE="font-style: italic; ">сказка</SPAN></H2> <DIV STYLE="text-align: right;"> <DIV CLASS="epig">Ну, погоди!.. <DIV CLASS="pdps">(Из мультфильма)</DIV> </DIV> </DIV> <BR> <DIV CLASS="ab">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV> <DIV CLASS="ab">Долго ли, коротко ли ...</DIV> <DIV CLASS="ab">И они жили долго и счастливо и умерли в один день.</DIV> <HR></DIV>Теперь вместо ссылки на второй рассказ напишем просто <SPAN onClick="show_hammer()">Рассказ «МОЛОТОК»</SPAN>Как видите, теперь, если пользователь щелкнет мышью на словах Рассказ “Молоток”, то будет выполнена функция show_hammer(). По нашей задумке, она должна заменить текст сказки на текст рассказа “Молоток”.
Вспомним, что весь текст сказки был заключен в блок <DIV>. А у любого блока <DIV>, как и у большинства других элементов, имеется свойство innerHTML, значение которое содержит весь HTML-код данного элемента! Это означает, что если мы изменим значение этого свойства, изменится и HTML-V.OJS,, а значит, и текст, содержащийся на странице. Наша функция show_hammer() может выглядеть, например, вот так:
function show_hammer() { document.all.rasskaz.innerHTML = '<H2>МОЛОТОК<BR><SPAN STYLE="font-style: italic; ">рассказ</SPAN></H2> <DIV STYLE="text-align: right;"> <DIV CLASS="epig">Мы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR> <DIV CLASS="ab">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>'; }Как видите, эта функция выполняет всего одно действие – присваивает свойству document.all.rasskaz.innerHTML значение, содержащее длинную-предлинную строку. В этой строке содержится весь HTML-код, рассказа “Молоток”.
Имитация гиперссылок
Но как пользователь узнает, что на словосочетании Рассказ “Молоток” нужно щелкнуть, как на гиперссылке, для появления текста рассказа на кране? Для этого придется либо действительно оформить его как гипер-ссылку, то есть заключить в тег <А HREF='#'>, либо просто подчеркнуть его, а также изменить вид указателя мыши над ним:
<SPAN STYLE="text-decoration: underline; cursor: hand;" onClick="show hammer()">Рассказ «МОЛОТОК»</SPAN>Можно сюда же добавить и изменение цвета, и тогда с точки зрения пользователя эта строка вообще не будет ничем отличаться от гиперссылки. Помните, в предыдущей “версии” этой страницы мы с вами определяли для гиперссылок коричневатый цвет с помощью таблиц CSS:
A: link, A: visited { color: #634438; }Теперь же наша мнимая гиперссылка на самом деле является элементом <SPAN>. Мы могли бы просто заменить в приведенном выше определении стиля A:link, A:visited на SPAN. Но поскольку этот элемент может использоваться еще для чего-нибудь на той же странице, лучше определим для него специальный класс, допустим, под названием Ink:
.Ink { color: #634438; }Кстати, подчеркивание и изменение формы указателя мыши можно также внести непосредственно в таблицу стилей:
.Ink { color: #634438; text-decoration: underline; cursor: hand; }