Программирование тега <div>

Действие тега <iframe> можно симулировать с помощью использование небольшого кода JavaScript, применяемого в теге <div>. Различие в том, что тег <div> не позволяет загружать отдельные страницы Web, как <iframe>. Однако можно задать общую компоновку в разделе и использовать программирование для замены элементов страницы, содержащихся внутри раздела. Такая техника применяется в следующем примере, в котором ссылки изменяют в разделе графические изображения и текстовые строки.

Рис. 10.9. Программирование тега <div> для эмуляции <iframe>

Этот раздел содержит тег <img/> для изображений и тег <span> для сопровождающего текста. Код показан на следующем листинге.

<img id="Picture" src="Artemis.gif"/><br/> <span id="Text">Temple of Artemis at Ephesus</span>

</div>

Листинг 10.18. Код раздела, содержащий теги <img/> и <span> (html, txt)

В теге <div>задаются различные стили, чтобы сделать его похожим на <iframe>, хотя это в действительности не требуется; можно применять любое оформление для его содержимого. Раздел смещен на странице влево, так, чтобы ссылки для замены изображений и текста выводились справа. Вложенный тег <img/> сконфигурирован сначала с первым изображением; тег <span> задает начальное значение текста. Отметим, что обоим тегам <img/> и <span> присвоены значения id. Эти присваивания необходимы, так как с помощью этих id теги идентифицируются для замены изображения и текста в сценариях.

Этот раздел сопровождает множество ссылок <a>, которые запрограммированы для замены изображений и текста. Эти теги показаны на листинге 10.19.

Листинг 10.19. Код ссылок для замены изображений и текста (html, txt)

Этот код не такой сложный, как кажется. Необходимо понять только, что замена выполняется для выбранных свойств тегов <img/> и <span>. Программируемыми свойствами тега <img/> являются:

src - адрес URL выводимого изображения, и alt - альтернативный текст, выводимый при указании мышью на изображение.

Программируемым свойством тега <span> является:

innerText - текстовая строка между открывающим и закрывающим тегами.

Сценарии JavaScript, закодированные внутри ссылок, просто присваивают новые свойства src , alt и innerText этим тегам, чтобы их изменить. Взгляните, например, на одну из этих ссылок:

<a href="javascript:" onclick="Picture.src='Colossus.gif'; Picture.alt='Colossues of Rhodes'; Text.innerText='Colossus of Rhodes'">Colossus</a>

Содержание Назад Вперед

Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий