Комментарии к ссылкам (скачать)

      Вот перед вами очередная статья, идею для которой я опять взял из рассылки, посвященной вопросам и ответам по веб-дизайну. Итак, сейчас я постараюсь реализовать следующую фишку. Допустим у нас есть два фрэйма: один - панель управления, другой - основной. Нужно реализовать такой механизм: при наведении курсора мыши на ссылку на панели управления в другом (основном) фрэйме появляется расширенный комментарий к этой ссылке. Мышь убираем со ссылки, комментарий исчезает. И так для каждой ссылки свой комментарий.
      Сразу расскажу, как я буду подходить к реализации данной проблемы. К каждой ссылке пишем отдельный комментарий и помещаем его между тэгами <div> </div>. За появление и исчезновение комментария будет отвечать свойство "display". Если display = none - комментарий не видно; display = block - комментарий видно. При загрузке страницы ни один комментарий не должен быть отображен, поэтому по умолчанию у всех комментариев свойство display = none. Изменение этого свойства будет происходить при наведении курсора мыши на ссылку. Воспользуемся для этого JavaScript (onMouseOver, OnMouseOut).
      Рассмотрим пример из четырех ссылок, каждая из которых должна иметь комментарий.
      В нужное место страницы пишем комментарии следующим образом:

<div id=d1 style="display:none">
Главная страница + новости + прогноз погоды </div> <div id=d2 style="display:none">
Услуги, товары, цены. Информация о фирме </div> <div id=d3 style="display:none">
Интервью с генеральным директором фирмы </div> <div id=d4 style="display:none">
Скидки для ветеранов 1812 года </div>

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

<TABLE WIDTH=100% BORDER=1>
<tr><td width=200>
<a href="1.html" onMouseOver="d1.style.display='block'" 
 onMouseOut="d1.style.display='none'">Главная страница </a>
<a href="2.html" onMouseOver="d2.style.display='block'" 
 onMouseOut="d2.style.display='none'">Информация </a>
<a href="3.html" onMouseOver="d3.style.display='block'" 
 onMouseOut="d3.style.display='none'">Интервью </a>
<a href="4.html" onMouseOver="d4.style.display='block'" 
 onMouseOut="d4.style.display='none'">Скидки </a>
<td>
   <div id=d1 style="display:none">
Главная страница + новости + прогноз погоды </div>   <div id=d2 style="display:none">
Услуги, товары, цены. Информация о фирме </div>   <div id=d3 style="display:none">
Интервью с генеральным директором фирмы </div>   <div id=d4 style="display:none">
Скидки для ветеранов 1812 года </div> </TABLE>

      А сама таблица вот так: (наведите курсор на любую ссылку)

Главная страница
Информация
Интервью
Скидки
 

      Итак, я сделал таблицу в одной колонке которой находятся ссылки при наведении на которые, становятся видимыми комментарии в другой колонке. И при отведении указателя мыши от ссылки комментарии исчезают.
      Теперь разносим ссылки и комментарии по разным фреймам. Для этого нам нужно написать их в разные файлы, первый из которых будет содержать:

<a href="1.html"
onMouseOver="parent.frame2.d1.style.display='block'" onMouseOut=" parent.frame2.d1.style.display='none'">
Главная страница </a> <a href="2.html"
onMouseOver=" parent.frame2.d2.style.display='block'" onMouseOut=" parent.frame2.d2.style.display='none'">
Информация </a> <a href="3.html"
onMouseOver=" parent.frame2.d3.style.display='block'" onMouseOut=" parent.frame2.d3.style.display='none'">
Интервью </a> <a href="4.html"
onMouseOver=" parent.frame2.d4.style.display='block'" onMouseOut=" parent.frame2.d4.style.display='none'">
Скидки </a>

      Что при этом изменилось? Теперь нам нужно при наведении на ссылку обращаться к другому фрейму и другому документу в нем. Для этого нужно сначала обратиться к родительскому окну "parent", а потом к фрейму где находятся комментарии. У меня он называется "frame2". И лишь затем только к тэгу <div> по имени.
      Код комментариев никак не изменится и останется прежним.
      Казалось бы все очень просто, добавили более полный путь к комментарию и все. Почему же тогда я говорил про то, что структура с фреймами гораздо сложнее? А дело вот в чем. Ну допустим загрузили мы наш сайт, поводили по ссылкам - все комментарии отображаются и исчезают. Все работает нормально. Но теперь мы берем и нажимаем какую-нибудь ссылку. Что при этом произойдет? В наш второй (основной) фрейм загрузится уже другая страница, где нет комментариев. И теперь, как только мы подведем курсор к любой из ссылок, у нас случится ошибка скрипта, о чем броузер нас радостно уведомит сообщением в строке состояния. Что же произошло? Как только мы подвели курсор к ссылке тут же передается команда о том, что невидимый комментарий в другом фрейме нужно сделать видимым. А в этом фрейме у нас уже другая страница на которой нет ни каких комментариев и броузер начинает ругаться. Как этого избежать? Можно взять и во все файлы, которые будут загружаться в основном фрейме поместить одинаковые комментарии как на главной странице. Но может оказаться так, что на какой-то странице вы не можете вставить комментарии. Например, вы загружаете в другой фрейм гостевую книгу, форум или еще что-то предоставляемое бесплатными службами и вы не можете изменить код этой гостевой и дописать туда свои комментарии. При этом при переходе посетителя в гостевую в любом случае будет появляться сообщение об ошибке. Можно конечно так и бросить, ведь ошибка не критическая и сайт продолжит свою работу при ее возникновении. Но у посетителя сложится впечатление об ущербности вашего сайта, о том, что эта ошибка мешает ему увидеть что-то важное.
      Поэтому я предлагаю следующее решение этой проблемы. Когда посетитель находится на первой странице с комментариями и нажимает одну из ссылок, то вместе с изменением содержания в основном фрейме, происходит загрузка другого файла и в фрейм с меню. Этот файл будет внешне выглядеть точно также, но он не будет пытаться отображать комментарии. То есть в нем в каждой ссылке не будет onMouseOver и onMouseOut.

<a href="1.html">Главная страница </a>
<a href="2.html">Информация </a>
и т.д.

      Если вы вдруг не знаете, как загрузить сразу два файла одной ссылкой, то это можно сделать так:

	
<script language=JavaScript>
function load_two ()
{
parent.frame1.location.href='file1.htm';
parent.frame2.location.href='file2.htm';
}
</script>
<a href="javascript:load_two()">Link</a>

или например так:

<a href="file1.htm" target="frame2" 
onClick="parent.frame1.location.href='file2.htm">Link</a>

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

Автор: Jimy SHADE
Сайт независимого дизайнера



© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин