главная -> уроки -> Span, innerHTML и картинки
 
Переехал на ased.dtn.ru

  Иногда возникает необходимость заполнения страницы периодически повторяющимися изображениями. Это так же можно выполнить посредством свойства 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+ ... далее понятно. Подобным образом возможно формирование сложных фоновых структур, но актуальный контент придется размещать на слое.

   
  © 2002-2004   Сединко А.М.
  © 2004 design by   kir
Hosted by uCoz