Урок 21. Скрытый текст с помощью JavaScript и с помощью динамического HTML

Для чего нужен скрытый текст?
Допустим, Вы не хотите отягощать свою страницу обилием какой-либо информации, например, вы хотите, разместить на Главной странице код вашего баннера, чтобы тот, кому понравится ваш сайт, мог поставить его на свою домашнюю страничку, однако, как мы можем догадаться, таких людей среди посетителей может оказаться немного и потому вывешивать код вашего баннера на всеобщем обозрении не имеет смысла. Лучше сделать маленький блок скрытого текста с маленькой, аrкуратной кникабельной надписью: Код нашего баннера. Тот, кому это нужно - нажмёт на надпись и увидит код. И совершенно не нужно на виду у всех выставлять html-потроха вашего баннера. Итак:

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

Код нашего баннера: <a href="http://dugward.ru/" target="_blank"> <img src="http://dugward.ru/banner1.jpg" border="0" width="88" height="31" alt="Литература и жизнь. Проблемы современной литературы"> </a>

Выглядит так:

Закрыть текст и читать далее.

Для того, чтобы действительно разобраться в яваскриптах (или иных каких-то скриптах), нужно потратить немало времени и сил. К тому же, по данным вопросам существует немало учебников и уроков. Поэтому просто приведу здесь два варианта того, как можно сделать скрытый текст на странице. И просто поясню, какой атрибут что обозначает. В будущем, если кому-то из вас понадобится изучить данный вопрос более подробно - вы уже будете иметь представление о том, с чем имеете дело.

Для начала поговорим о том, что для скрытого текста нам понадобится представлять себе, что такое "переменная". Несколько слов о том, что же это такое и почему она так важна

Скрытый текст, который я привела выше, сделан с помощью JavaScript. И вот по какому принципу он работает:
В компьютере все данные сохраняются на диске, в определённом месте, которое помечено, чтобы программа, которая отвечает за извлечение данных, знала, где что искать. Поскольку любой скрипт - это тоже программа, он точно так же работает с данными, под которые должно быть отведено определённое место. В данном случае, не в компьютере, а в коде вашей html-страницы. Поэтому вам необходимо занять место под те данные, которые, к примеру, помещаются в скрытом тексте. И пометить это место, чтобы в нужный момент программа нашла их и вывела на экран.
Переменной помеченный участок будет называться потому, что вы можете вложить в него любые значения, которые в нужный вам момент будут выводиться на экран с помощью скрипта. Нажимаете ссылку - и на экран выводятся те данные, которые вы поместили в скрытый текст. Пока всё просто, не так ли?
В коде нашей программы (скрипта) мы обозначаем нашу переменную каким-либо именем. В языке JavaScript есть некоторые ограничения для создания имён, о которых я здесь говорить не буду. Если вам понадобится скрипт скрытого текста - просто воспользуйтесь тем, что есть. Рассмотрим, из чего состоит наш код скрытого текста.

Весь скрипт будет выглядеть следующим образом: Этот сегмент ставим между <head> и </head>:

А этот сегмент помещаем в то место документа html, между <body> и </body>, где вам нужно:

<a href="javascript: displ('var')"> скрытый текст</a>
<div id="var" style="display: none;">
Этот скрытый текст сделан с помощью JavaScript. И вот по какому принципу он работает:... (далее по тексту)
<a href="javascript: displ('var')"> Закрыть текст и читать далее.</a>
</div>

Чтобы закрыть текст, необязательно нажимать ссылку "Закрыть текст". Можно вторично нажать первую ссылку. Чтобы нижней ссылки не было, просто уберите её (то есть, саму ссылку <a href="javascript: displ('var')"> Закрыть текст и читать далее.</a> )

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

Этот скрытый текст работает на динамическом HTML, или DHTML. Что такое DHTML:
Динамический html (Dynamic HTML) или DHTML - это не какой-то особенный язык для разметки страниц. Это обозначение страниц с динамически изменяемым без обновления страницы содержимым. Состоит DHTML из трёх компонентов: собственно html, элементов каскадных таблиц стилей (CSS) и элементов языка сценариев (JavaScript или VBScript). Эти три компонента связываются между собой, образуя своеобразный интерфейс, который и позволяет вносить в статическую html-страницу динамические изменения без перезагрузки всей страницы.

Весь скрипт, который позволяет внести элемент динамики в вашу html-страницу, вы устанавливаете в нужном вам месте страницы между тегами <body> и </body> . В данном случае этот сегмент выглядит следующим образом:

<span> <a href="#" title="скрытый текст" onclick=" obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!='block') ? 'block' : 'none';
obj.display=tmp;
return false;"> Скрытый текст</a> <div class="subblock" style="display: none">
<span style="color: blue;"> Здесь у нас скрытый текст, который работает без JavaScript. Для того, чтобы понять, как он работает, читайте далее на странице: </span> </div> </span>

Рассмотрим отдельные элементы:

onclick - это событие, которое происходит по нажатию левой кнопкой мыши.

obj - это тот сегмент, который будет содержать всё остальное (сходное с тегом textarea).

this.parentNode.childNodes[1].style (this - это, parent - родитель, Node - узел, child - ребёнок, Nodes - узлы). То есть, мы имеем соотношение между родительским и дочерним узлами, при чём вариант у нас всего один (либо текст, либо его нет).

tmp - могут сослаться на любое из следующих действий

obj.display! - В данном случае акцент на то, какой блок мы видим на экране.

block - то, в чём заключён текст.

none - ничто. То есть, нет никакого текста.

return false - ложный возврат

subblock - на блок, в котором нет текста. То есть, по логике всего кода мы по умолчанию имеем пустое место, которое не читает браузер до тех пор, пока мы не совершим действие - нажмём на ссылку. При повторном нажатии на ссылку мы снова получим якобы пустое место, а на самом деле просто по умолчанию от браузера блокируется та часть текста, которую мы хотим оставить скрытой.

А здесь смотрим код впадающего меню в левой колонке:

<table width=100% border="0">
<tr>
<td align="left" VALIGN=top>
<span> <a href="#" title="скрытый текст" onclick="
obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!='block') ? 'block' : 'none';
obj.display=tmp;
return false;"> Литературная критика </a> <div class="subblock" style="display: none">
<a href=http://dugward.ru/library/sodlib.html target="_blank"> Тематический каталог </a> <br>
<a href=http://dugward.ru/library/sodlib_al.html target="_blank"> Алфавитный каталог </a>
</div> </span> <br>

<span> <a href="#" title="скрытый текст" onclick=" obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!='block') ? 'block' : 'none';
obj.display=tmp;
return false;"> Прочие материалы сайта </a> <div class="subblock" style="display: none">
<a href=http://dugward.ru/publ/publ.html target="_blank"> Статьи </a> <br>
<a href=http://forum.dugward.ru/ target="_blank"> Форум </a> <br>
<a href=http://lezione.dugward.ru/ target="_blank"> Как мы делали этот сайт </a> <br>
<a href=http://dugward.ru/novel/novel.html target="_blank"> Зарисовки прошлого и настоящего </a>
</div> </span> <br>

</td>
</tr>
</table>

И весь код страницы вместе с впадающим меню в левой колонке (код выпадающего меню выделен синим цветом):

<html>
<head>
<style type="text/css">
.p1
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
}
</style>
<title> Наша первая страница </title>
</head>
<body bgcolor="#c0c0c0" background="f3.gif">

<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td align="left"> <img src="logo.jpg" border="0"> </td>
<td WIDTH=200px>

<table width="100%" border="3" cellspacing="0", cellpadding="0" VALIGN=top>
<td>
<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/">
<img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>
</td>
</tr>
</table>
</td>
</table>

</td>
</table>
<table width="100%" cellspacing="0", cellpadding="0" border="0">
<td WIDTH=200px VALIGN=top>

<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td>

<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center">
<table width=100% border="0">
<tr>
<td align="left" VALIGN=top>
<span> <a href="#" title="скрытый текст" onclick="
obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!='block') ? 'block' : 'none';
obj.display=tmp;
return false;"> Литературная критика </a> <div class="subblock" style="display: none">
<a href=http://dugward.ru/library/sodlib.html target="_blank"> Тематический каталог </a> <br>
<a href=http://dugward.ru/library/sodlib_al.html target="_blank"> Алфавитный каталог </a>
</div> </span> <br>

<span> <a href="#" title="скрытый текст" onclick=" obj=this.parentNode.childNodes[1].style;
tmp=(obj.display!='block') ? 'block' : 'none';
obj.display=tmp;
return false;"> Прочие материалы сайта </a> <div class="subblock" style="display: none">
<a href=http://dugward.ru/publ/publ.html target="_blank"> Статьи </a> <br>
<a href=http://forum.dugward.ru/ target="_blank"> Форум </a> <br>
<a href=http://lezione.dugward.ru/ target="_blank"> Как мы делали этот сайт </a> <br>
<a href=http://dugward.ru/novel/novel.html target="_blank"> Зарисовки прошлого и настоящего </a>
</div> </span> <br>

</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
</table>

</td>

<td VALIGN=top>
<table width="100%" body bgcolor=#e5e5e7 border="3"> <td align="center">

<table width="95%" border="0" VALIGN=top>
<td align="center">
<font face="Arial" font color="#000000" style="font-size: 14pt">
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p>
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p>
</font>
</td>
</table>
</td>
</table>
</td>
<td WIDTH=200px VALIGN=top> Баннеры <br> и реклама </td>
</table>

<table width="100%" cellspacing="0" cellpadding="0" border="3">
<td align="center"> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br>

<br>
<a href="http://palmernw.ru/" target="_blank"> <img src="http://palmernw.ru/bannerw.jpg" border="0" width="88" height="31" alt="Монастыри и храмы Северо-запада"> </a> <a href="http://dugward.ru/" target="_blank"> <img src="http://dugward.ru/banner4.jpg" border="0" width="88" height="31" alt="Литература и жизнь. Проблемы современной литературы"> </a> <a href="http://trustworthysw.ucoz.ru/" target="_blank"> <img src="http://trustworthysw.ucoz.ru/avat2/b3.jpg" border="0" width="88" height="31" alt="RPG Настоящие Звёздные Войны - II"> </a> <a href="http://foxyfox3.narod.ru/index.html" target="_blank"> <img src="http://s51.radikal.ru/i133/0809/69/2fef14206376.jpg" border="0" alt="Форумные ролевые игры. Проблемы, решения, реклама"> </a>
<br>
</td>
</table>

</body>
</html>

Вот таким не очень сложным способом можно внести динамику в свою html-страницу.
Примечание: При создании скрытого текста обязательно учтите один важный момент: поскольку принцип скрытого текста основывается на запрещении браузеру читать то, что находится в определённом месте страницы, всё, что вы поставите в скрытый текст - не читается, соответственно, и поисковиками тоже. То есть, помещать в скрытый текст важную информацию, по которой поисковики могут проиндексировать вашу страницу - нежелательно.