Основы работы с XHTML и CSS


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


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

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

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

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

<div style="width:350px; height:250px; float:left; padding:10px; margin-right:10px; background-color:black; color:white; border:ridge 5px">

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

</div>

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

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

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

<a href="javascript:" onclick="Picture.src='Artemis.gif'; Picture.alt='Temple of Artemis at Ephesus'; Text.innerText='Temple of Artemis at Ephesus'">Artemis</a><br/> <a href="javascript:" onclick="Picture.src='Colossus.gif'; Picture.alt='Colossues of Rhodes'; Text.innerText='Colossus of Rhodes'">Colossus</a><br/> <a href="javascript:" onclick="Picture.src='Gardens.gif'; Picture.alt='Hanging Gardens of Babylon'; Text.innerText='Hanging Gardens of Babylon'">Gardens</a><br/> <a href="javascript:" onclick="Picture.src='Halicarnassus.gif'; Picture.alt='Mausoleum at Halicarnasus'; Text.innerText='Mausoleum at Halicarnasus'">Halicarnassus</a><br/> <a href="javascript:" onclick="Picture.src='Lighthouse.gif'; Picture.alt='Lighthouse of Alexandria'; Text.innerText='Lighthouse of Alexandria'">Lighthouse</a><br/> <a href="javascript:" onclick="Picture.src='Pyramid.gif'; Picture.alt='Great Pyramid of Giza'; Text.innerText='Great Pyramid of Giza'">Pyramid</a><br/> <a href="javascript:" onclick="Picture.src='Zeus.gif'; Picture.alt='Statue of Zeus at Olympia'; Text.innerText='Statue of Zeus at Olympia'">Zeus</a><br/>




Начало  Назад  Вперед



Книжный магазин