ASed. Приемы web дизайна


на главную	Урок2. Span, innerHTML и картинки

Иногда возникает необходимость заполнения страницы периодически повторяющимися изображениями. Это так же можно выполнить посредством свойства innerHTML. В реальности (посмотрите в виде HTML данную страницу) Javascript и HTML код разнесены по своим разделам. Кода и комментария достаточно для понимания механизма работы данного способа обновления (изменения) информации.

Определяем язык

Описываем функцию Определяем переменную, задаем начальное значение
Формируем в цикле строку с набором картинок
изменяем содержимое соответствующего HTML элемента
Завершаем скрипт

Собственно, HTML код
Кнопка "Тест"
<span> область, фактически ограничена размерами ячейки таблицы, в которую помещена

Вот и все!

<SCRIPT LANGUAGE="JavaScript">

function test() {
var tmp ="<IMG SRC='pic2.gif'>";

for (var i= 1; i<17; ++i){
tmp = tmp + "<IMG SRC='pic1.gif'>
<IMG SRC='pic2.gif'><IMG SRC='pic3.gif'>";
}
img123.innerHTML = tmp;
}

</SCRIPT>

<INPUT TYPE=BUTTON onClick = test() VALUE="Тест" >
<p>
<span id= "img123"> </span>

    Сделайте массив рисунков желаемой последовательности и дополняйте их по таймеру в определенную область - еще один вариант применения рассмотренного механизма. При этом читаем содержимое, например:
   img123.innerHTML=img123.innerHTML+ ... далее понятно. Подобным образом возможно формирование сложных фоновых структур, но актуальный контент придется размещать на слое.
    Следующий урок уже скоро.