Cамоучитель по созданию сайтов


Имитация гиперссылок



Имитация гиперссылок

Но как пользователь узнает, что на словосочетании Рассказ “Молоток” нужно щелкнуть, как на гиперссылке, для появления текста рассказа на кране? Для этого придется либо действительно оформить его как гипер-ссылку, то есть заключить в тег <А HREF='#'>, либо просто подчеркнуть его, а также изменить вид указателя мыши над ним:

<SPAN STYLE="text-decoration: underline; cursor: hand;" onClick="show hammer()">Рассказ &laquo;MonoTOK&raquo;</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()">Рассказ &laquo;МОЛОTOK &raquo;</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);



- Начало - - Назад - - Вперед -