Иллюстрированный самоучитель по созданию сайтов › Веб-страницы, реагирующие на действия пользователя › Использование других свойств при работе с текстом [страница - 133] | Самоучители по работе в Internet

Использование других свойств при работе с текстом

И так давайте еще раз посмотрим на текст получившейся страницы. В ней использована одна функция show() для отображения любого из текстов. Обратите внимание на то, что при ее написании использован тот факт, что имя переменной, содержащей текст каждого рассказа, если к нему прибавить окончание Ink, совпадает с именем соответствующей мнимой гиперссылки. Подобный разумный выбор имен позволяет передавать функции не два параметра (ivanink и ivan), а только один, что экономит время и ресурсы компьютера. В данном случае это не столь существенно, поскольку раз мер страницы невелик, но в некоторых случаях может сыграть большую роль.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
    <TITLE>Домашняя страница Сергея Сергеева.</TITLE>
    <STYLE>
        BODY { 
            background-color: #BABAAO; 
            color: rgb(29.29.24); 
        } 
        H1, 
        H2 { 
            text-align: center; 
        } 
        H3 { 
            text-align: center; 
            color: red; 
        } 
        .Ink { 
            color: #634438; 
            text-decoration: underline; 
            cursor: hand; 
        } 
        .Ink0 { 
            color: rgb(29.29.24); 
            text-decoration: none; 
            cursor: default; 
        } 
        HR { 
            margin-top: 24px; 
            width: 75%; 
            DIV.epig { 
                text-align: justify; 
                font-size: smaller; 
                width: 130; 
            } 
            DIV.pdps { 
                font-style: italic; 
                text-align: right; 
            } 
            DIV.ab { 
                text-align: justify; 
                text-indent: 2em; 
            } 
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
        //<!-- 
        var oldlnk = "ivanlnk"; 
        var timer; 
        var hammer = ' 
<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>'; 
        var ivan = '<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><DIV CLASS="ab">Долго ли, коротко ли... </DIV> 
<DIV CLASS="ab">И они жили долго и счастливо и умерли в один день.</DIV><HR>'; 
  
        function show(arg) { 
                clearTimeout(timer); 
                document.all.rasskaz.innerHTML = eval(arg); 
                document.all[oldink].className = "lnk"; 
                oldlnk = arg + 'Ink'; 
                document.all[oldink].className = "lnk0"; 
                timer = setTimeout("document.all.rasskaz.insertAdjacentHTML('AfterBegin', '<H3>Hy что, нравится?<H3>') ", "60000"); 
            } 
            //--> 
    </SCRIPT>
</HEAD>
  
<BODY>
    <H1>Домашняя страница Сергея Сергеева</H1>
    <BR>
    <DIV STYLE="font-size: larger;">
        <SPAN STYLE="font-weight: bold;" Сергей Сергеев</SPAN> &mdash; писатель-авангардист, автор 20 рассказов. 
        <BR>В жизни большой любитель собак и компьютерных игр. 
        <BR>
        <BR>Некоторые его рассказы вы можете прочитать прямо здесь.</DIV>
    <HR>
    <DIV STYLE="text-align: center;">
        <SPAN CLASS="lnk" ID="ivanlnk" onClick="show('ivan')">Сказка &laquo;Иван-царевич и серый заяц&laquo;</SPAN>&nbsp;
        <SPAN CLASS="lnk" ID="hammerlnk" onClick="show('hammer')">Рассказ &laquo;МОЛОТОК&raquo;</SPAN>
    </DIV>
    <HR>
    <DIV ID="rasskaz"></DIV>
</BODY>
  
</HTML>