Бесплатный софт, вэб-сервисы, ресурсы по раскрутке и заработку, свежие номера журнала "Internet Zone". Посетите нас: http://www.izcity.com/ 

Меню и галерея в одном флаконе

Как перезаписать фрагмент HTML - кода
Александр Рыбников

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

Если Вы хотите создать страничку с таким меню, то первое, что приходит в голову - это использовать фреймовую структуру. В этом случае перерисовка всей страницы не требуется, достаточно лишь перезагрузки соответствующего фрейма. Что, безусловно, уменьшает время загрузки. Однако наличие дополнительной полосы скроллинга фреймов существенно ухудшает дизайн страницы, а её отсутствие в некоторых случаях делает просмотр отдельных частей фрейма (за пределами окна броузера) просто невозможным.

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

Рассматривая достоинства и недостатки каждого из этих методов, Вы наверняка задумывались о том, а как было бы здорово, будь у Вас возможность перезаписать только фрагмент HTML-кода страницы в зависимости от действий пользователя…

Internet Explorer прекрасно позволяет перезаписать код любого тега, реагирующего на события, но, к сожалению, аналогичной функции нет в Netscape Navigator. В последнее время Интернет всё больше и больше пополняется страницами, которые динамически перерисовываются, если Вы используете первый броузер, и перезагружаются вновь в случае использования второго. Это вполне допустимый метод решения нашей задачи, поэтому мы расскажем, как динамически обновлять фрагменты HTML-кода в Internt Explorer.

В Internet Explorer каждый элемент имеет следующие свойства: innerText, outerText, innerHTML, outerHTML. Свойство innerHTML позволяет изменить HTML-код, содержащийся между открывающимися и закрывающимися тегами элемента. Свойство outerHTML позволяет изменять код между открывающимися и закрывающимися тегами, включая их самих. Свойства innerText и outerText выполняют аналогичные функции относительно текста.

Рассмотрим построение динамической галереи с использованием раскрывающегося меню в левой части страницы. На этом примере мы постараемся продемонстрировать функции свойств innerHTML и outerHTML.

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

Теперь рекомендуется посмотреть работающий вариант.

Вначале мы рассмотрим, как реализовать появление заголовков подгалерей с картинками при нажатии на название галереи. Для этого введём переменные indPiople=0, indAnimals=0, являющиеся индикаторами, показывающими, открыт в данный момент соответствующий пункт меню или нет. Затем напишем функцию rewriteAnimals1(), которая позволяет перезаписать код (содержащий слово “животные” в теге <h2>) в том случае, если в данный момент времени пункт меню (“Животные”) закрыт:

function rewriteAnimals1(){
Animals.innerHTML="<h2 onClick=\"if(indAnimals==0) {rewriteAnimals1(); indAnimals=1} else {rewriteAnimals0();indAnimals=0}\"><b><i><font color=#000080>Животные:</font></i></b></h2> <table border=0 width=100% cellspacing=0 cellpadding=0><tr><td width=50%> <p align=center><img border=0 src=Kat/1m.jpg width=50 height=75 onClick=\"rewriteKat();\"><br><font face=Arial size=1>Кошки</font></td><td width=50%><p align=center><img border=0 src=dogs/1m.jpg width=50 height=75 onClick=\"rewriteDogs();\"><br> <font face=Arial size=1>Собаки</font> </td></tr></table>";
}

Аналогично пишется функция rewriteAnimals0(), вызываемая в том случае, если пункт в данный момент времени активен:

function rewriteAnimals0(){
Animals.innerHTML="<h2 onClick=\"if(indAnimals==0) {rewriteAnimals1(); indAnimals=1} else {rewriteAnimals0();indAnimals=0}\"><b><i><font color=#000080>Животные</font></i></b></h2> ";
}

Важно обратить внимание на то, что в случае активизации пункта меню после заголовка галереи появляется знак “двоеточие”.

Вызов этих функций осуществляется из тега <h2> при обработке события onClick:

<h2 onClick="if(indPiople==0) {rewriteAnimals1(); indAnimals=1} else {rewriteAnimals0();indAnimals=0}">

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

function rewriteDogs(){
showtable.innerHTML=" <table border=0 width=100% cellspacing=0 cellpadding=0><tr> <td width=50% align=center><img border=0 src=dogs/1.jpg width=200 height=300></td> <td width=50% align=center><img border=0 src=dogs/2.jpg width=200 height=300></td> </tr></table>";
}

Полный код программы Вы можете скачать, сохранив код страницы с работающим вариантом.

Возможности применения этих возможностей Internet Explorer не ограничиваются только созданием подобных галерей. С помощью свойств innerHTML и outerHTML Вы можете перезаписать практически любую часть страницы без её полной перезагрузки, что естественно экономит время Ваших посетителей. Правда, в этом случае необходимо помнить о пользователях Netscape Navigator, для которых придётся написать HTML-код, реализующий полную перезагрузку.

Удачного творчества!

Источник: http://emedia.atrus.ru/

 


Copyright © 2000г. "Internet Zone" & Nik Romanov, info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.