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


Программирование тега <div> - часть 2


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

Этот код не такой сложный, как кажется. Необходимо понять только, что замена выполняется для выбранных свойств тегов <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>

Атрибут href="javascript:", аналогично его использованию ранее для открытия страницы Web в новом окне браузера, аннулирует тег как ссылку URL и вместо этого указывает, что выполняется процедура JavaScript. Обработчик событий щелчка мыши включает вложенный сценарий (заключенный в двойные кавычки), когда происходит щелчок на ссылке. Выполняется три оператора JavaScript, закодированные здесь на трех отдельных строках для удобства чтения и разделенные точкой с запятой (;).

Первый оператор,

Picture.src='Colossus.gif'

присваивает текстовое значение 'Colossus of Rhodes' свойству alt тега с id="Picture" (снова тегу <img/>). Третий оператор,

Text.innerText='Colossus of Rhodes'

присваивает текстовую строку свойству innerText тега с id="Text" (тегу <span>). Эти три присваивания заменяют текущие значения этих свойств другими значениями, что приводит к выводу другого изображения, другого альтернативного текста и другого текста подписи, которые появляются в разделе.

Значения в кавычках в этих операторах окружены одиночными кавычками ('), чтобы отличить их от двойных кавычек, окружающих весь сценарий.

Такая возможность программирования тегов XHTML и задания различных значений свойств после загрузки является сутью так называемого динамического HTML (DHTML). Показанное программирование является только крохотным примером множества изменений, которые можно делать на странице Web на основе взаимодействия пользователей с тегами на странице. DHTML заслуживает отдельного более полного рассмотрения и находится за рамками этой книги.

Основное замечание, которое надо здесь сделать, состоит в том, что не существует хорошей замены для множества фреймов и линейных фреймов. В настоящее время консорциум W3C работает над альтернативным решением, чтобы предоставить такую же функциональность, но пока оно еще не стало формальными рекомендациями и не реализовано в браузерах. В настоящее время можно продолжать использовать на страницах множества фреймов и плавающие фреймы, помня о том, что, хотя они обеспечивают удобные функции, они не соответствуют стандартам XHTML.

© 2003-2007 INTUIT.ru. Все права защищены.




Начало  Назад  



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