Как имитировать гипер-ссылку |
Но как пользователь узнает, что на словосочетании Рассказ “Молоток” нужно щелкнуть, как на гиперссылке, для появления текста рассказа на кране? Для этого придется либо действительно оформить его как гипер-ссылку, то есть заключить в тег <А href='#'>, либо просто подчеркнуть его, а также изменить вид указателя мыши над ним:
<SPAN STYLE="text-decoration: underline; cursor: hand;" onClick="show hammer()">Рассказ «MonoTOK»</SPAN>
Можно сюда же добавить и изменение цвета, и тогда с точки зрения пользователя эта строка вообще не будет ничем отличаться от гиперссылки. Помните, в предыдущей “версии” этой страницы мы с вами определяли для гиперссылок коричневатый цвет с помощью таблиц CSS:
A:link,A:visited { color: #634438; }
Теперь же наша мнимая гиперссылка на самом деле является элементом <SPAN>.Mы могли бы просто заменить в приведенном выше определении стиля A:link, A:visited на SPAN. Но поскольку этот элемент может использоваться еще для чего-нибудь на той же странице, лучше определим для него специальный класс, допустим, под названием Ink:
.Ink { color: #634438; }
Кстати, подчеркивание и изменение формы указателя мыши можно также внести непосредственно в таблицу стилей:
.Ink { color: #634438; text-decoration: underline; cursor: hand; } Теперь осталось написать сам код нашей мнимой гиперссылки:
<SPAN CLASS="ink" onClick="show_hammer()">Рассказ «МОЛОTOK »</SPAN>
Итак, теперь эта страница приобрела внешний вид, показанный на рис. 7.11. После щелчка на мнимой гиперссылке Рассказ “Молоток” ее вид изменится (см. рис. 7.12).
Вот исходный текст этой страницы.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<ТITLE>Домашняя страница Сергея Сергеева.</TITLE>
<STYLE>
<!--
BODY { background-color: #BABAAO; color: rgb(29,29,24); } Н1,Н2 { text-align: center;
} .Ink ( color: #634438; text-decoration: underline; cursor: hand;
} 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">
<!--
function show_hammer()
{ document. all. rasskaz . innerHTML='
<H2>MOЛOTOK<BR>
<SPAN STYLE="font-style: italic;">paccкaз</SPAN></H2>
<DIV STYLE="text-align: right; "><DIV CLASS="epig">Mы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV>
</DIV>
</DIV><BR>
<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии... (Здесь располагается текст рассказа) </DIV>';
} //-->
</SCRIPT> </HEAD>
<BODY> <Н1>Домашняя страница Сергея Сергеева</Н1>
<DIV STYLE="text-align: center;">Сказка «Иван-царевич и серый заяц&гаquо;
<SPAN CLASS="lnk" onClick="show_hammer()">Рассказ « ;МОЛОTOK»</SPAN></DIV>
<BR>
<DIV STYLE="font-size: larger; ">
<SPAN STYLE="font-weight: bold;"> Сергей CepreeB</SPAN> — писатель-авангардист, автор 20 рассказов.<BR>
В жизни большой любитель собак и компьютерных игр.<ВR><ВR> Некоторые его рассказы вы можете прочитать прямо здесь.</DIV> <HR>
<DIV ID="rasskaz">
<Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВR>
<SPAN STYLE="font-style: italic;">CАKЗKА</SPAN></H2>
<DIV STYLE="text-align: right;"> <DIV CLASS="epig"> Ну, погоди!..
<DIV CLASS="pdps">(Из мультфильма)</DIV> </DIV> </DIV> <BR>
<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе -как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>
<DIV CLASS="аЬ">Долго ли, коротко ли ...</DIV>
<DIV CLASS="ab">И они жили долго и счастливо и умерли в один день.</DIV>
<HR> </DIV> </BODY> </HTML>
Подобная смена содержимого довольно большого фрагмента страницы всегда выглядит привлекательно. Заметьте, что изменение произойдет практически мгновенно, так как весь нужный текст на самом деле загру жается в память пользовательского компьютера еще при загрузке страницы. В момент нажатия на мнимую гиперссылку он уже не должен загружаться через Интернет, а просто отобразится на экране.
|
