|
||
|
||
Меню и галерея в одном флаконе |
||
Как
перезаписать фрагмент HTML - кода
Второй способ решения этой задачи, который мы уже рассматривали в одном из предыдущих номеров журнала, это создание динамических слоёв. К сожалению, это усложняет HTML-код и вводит значительные ограничения, связанные с привязкой каждого слоя к координатам страницы. Рассматривая достоинства и недостатки каждого из этих методов, Вы наверняка задумывались о том, а как было бы здорово, будь у Вас возможность перезаписать только фрагмент HTML-кода страницы в зависимости от действий пользователя… Internet Explorer прекрасно позволяет перезаписать код любого тега, реагирующего на события, но, к сожалению, аналогичной функции нет в Netscape Navigator. В последнее время Интернет всё больше и больше пополняется страницами, которые динамически перерисовываются, если Вы используете первый броузер, и перезагружаются вновь в случае использования второго. Это вполне допустимый метод решения нашей задачи, поэтому мы расскажем, как динамически обновлять фрагменты HTML-кода в Internt Explorer. В Internet Explorer каждый элемент имеет следующие свойства: innerText, outerText, innerHTML, outerHTML. Свойство innerHTML позволяет изменить HTML-код, содержащийся между открывающимися и закрывающимися тегами элемента. Свойство outerHTML позволяет изменять код между открывающимися и закрывающимися тегами, включая их самих. Свойства innerText и outerText выполняют аналогичные функции относительно текста. Рассмотрим построение динамической галереи с использованием раскрывающегося меню в левой части страницы. На этом примере мы постараемся продемонстрировать функции свойств innerHTML и outerHTML.
Теперь рекомендуется посмотреть работающий вариант.
function rewriteAnimals1(){ Аналогично пишется функция rewriteAnimals0(), вызываемая в том случае, если пункт в данный момент времени активен: function rewriteAnimals0(){ Важно обратить внимание на то, что в случае активизации пункта меню после заголовка галереи появляется знак “двоеточие”. Вызов этих функций осуществляется из тега <h2> при обработке события onClick: <h2 onClick="if(indPiople==0) {rewriteAnimals1(); indAnimals=1} else {rewriteAnimals0();indAnimals=0}"> Для того, чтобы показать содержимое подгалерей в правой части страницы при клике на соответствующую картинку, необходимо создать аналогичным образом ещё четыре функции. Примером одной из них является функция function rewriteDogs(), которая осуществляет вывод на экран галереи, посвящённой собакам: function rewriteDogs(){ Полный код программы Вы можете скачать, сохранив код страницы с работающим вариантом. Возможности применения этих возможностей 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/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. |