Создание сценариев с использованием свойства innerHTML

Свойство innerHTML является как свойством всего объекта document, так и свойством его дочерних объектов и позволяет управлять HTML кодом внутри объектов Web-страницы, например содержимым ячейки таблицы, фрейма т.п.

Рассмотрим пример динамической смены HTML кода ячейки таблицы:

· в файле script3.html после HTML-кода ранее выполненных упражнений разместить код следующего сценария:

<script>

var s=new Array()

s[0]='<imgsrc="../img/ivanov.jpg" >'

s[1]='<imgsrc="../img/petrov.jpg" >'

s[2]='<imgsrc="../img/sidorov.jpg" >'

</script>

В этом сценарии объявляется массив с именем s и определяются его первые три элемента как фрагменты HTML-кода. В тегах img следует указать существующие у Вас изображения в папке img;

· ниже написанного скрипта создать таблицу с объединением ячеек во втором столбце (рис. 4.6):

Рис. 4.6. Пример структуры таблицы

· в открывающем теге объединенной ячейки указать ее имя при помощи арибута id – выделенный фрагмент на рис. 4.7.

· внутри объединенной ячейки разместить любое изображение, например группы, которое будет появляться первоначально в этой ячейке при открытии страницы;

· в открывающих тегах ячеек первого столбца добавить атрибут обработки события наведения мыши onmouseover со сценарием присвоения свойству innerHTML объекта student содержимого соответствующего элемента массива s (рис. 4.6);

· внутри ячеек первого столбца разместить фамилии студентов, соответствующие изображениям;

Не нашли, что искали? Воспользуйтесь поиском: