Вот перед вами очередная статья, идею для
которой я опять взял из рассылки, посвященной вопросам и ответам по веб-дизайну.
Итак, сейчас я постараюсь реализовать следующую фишку. Допустим у нас есть два
фрэйма: один - панель управления, другой - основной. Нужно реализовать такой механизм:
при наведении курсора мыши на ссылку на панели управления в другом (основном)
фрэйме появляется расширенный комментарий к этой ссылке. Мышь убираем со ссылки,
комментарий исчезает. И так для каждой ссылки свой комментарий.
Сразу расскажу, как я буду подходить к реализации данной
проблемы. К каждой ссылке пишем отдельный комментарий и помещаем его между тэгами
<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
Сайт независимого
дизайнера