HTML+CSS+JavaScript

Здравствуйте Уважаемое сообщество.
Ни поможете написать скрипт плавной загрузки и смены нескольких изображений.
Пусть имеется таблица (4 на 3) 4 столбца и 3 строки.
Эта таблица содержит 12 рисунков, при начале загрузки страницы все 12 областей это 1 рисунок.
- Через 0,2 сек открываются 3 картинки, каждая в 1 из 3 строк (эта любая из 4 позиций)
- После картинки стоят 2 сек,
- После идёт открытие ещё 3 картинок, каждая в 1 из 3 строк (эта любая из 4 позиций), эти позиции не должны совпадать с 1 появлением.
- После картинки стоят 2 сек,
- и так ещё 2 появления.
После 4 появлений, цикл повторяется заного.
Если что не так точно описано то извините, в целом идея наверно понятна.
Искал скрипт в интернете ни смог найти.
Ни поможете написать, или может ссылку дадите на готовое решение.

Возможно вас заинтересует решение по ссылке http://softtime.ru/forum/read.php?id_forum=4&id_theme=80623, это не полное решение, но от него можно начать отталкиваться.

Смотрите html код у меня выгледит так

<table class="img_right_header"> <tr> <td> <img src="images/bg_img_right_header.jpg" width="135" height="87" alt="" /> </td> <td> <img src="images/bg_img_right_header.jpg" width="135" height="87" alt="" /> </td> <td> <img src="images/bg_img_right_header.jpg" width="135" height="87" alt="" /> </td> <td> <img src="images/bg_img_right_header.jpg" width="135" height="87" alt="" /> </td> </tr> ... </table>

Как здесь сделать чтоб из 4 картинок через 1 сек после загрузки страницы изменилось 1 из 4 изображений и стояло 2 сек,
можно определить массивами переменные для каждого изображения?
и через задержку в 1 сек, загрузить любое из 4 изображений?

Можно отталкиватся вот от этого скрипта.

<script type="text/javascript">     <!--     var numimg = 0;           var imgslide=new Array();     imgslide[0]=new Image();     imgslide[1]=new Image();     imgslide[2]=new Image();     imgslide[3]=new Image();           imgslide[0].src ="img-1.jpg";     imgslide[1].src ="img-2.jpg";     imgslide[2].src ="img-3.jpg";     imgslide[3].src ="img-4.jpg";          x = Math.floor(Math.random( ) * 4);           function dem(flag) {         if(flag) {             numimg++;             if(numimg == 4) numimg = 0;         } else {             numimg--;             if(numimg <= 0) numimg = 4;         }                  x = Math.floor(Math.random( ) * 4);         document.getElementById('imgproba1').src = imgslide[numimg%x].src;          document.getElementById('imgproba2').src = imgslide[numimg%x].src;         document.getElementById('imgproba3').src = imgslide[numimg%x].src;          document.getElementById('imgproba4').src = imgslide[numimg%x].src;      }      -->     </script>

html

<div class="widthall" >     <a href="#" onclick="dem(false); return false">Назад</a>     <img src="img-1.jpg" Id="imgproba1" alt="" width="80" height="80" border="1" />      <img src="img-2.jpg" Id="imgproba2" alt="" width="80" height="80" border="1" />      <img src="img-3.jpg" Id="imgproba3" alt="" width="80" height="80" border="1" />      <img src="img-4.jpg" Id="imgproba4" alt="" width="80" height="80" border="1" />      <a href="#" onclick="dem(true); return false">Вперёд</a>     </div>

Правда здесь скрипт нужно немного корректировать.
Как сделать чтоб из 4 картинок через задержку в 1 сек, (после загрузки страницы)
Изменилась 1 картинка, этот рисунок стоял 2 сек и после изменилась другая картинка.
До полного прохода 4 картинок, рисунки, и позиции где менялся рисунок не должны повторяться.
После того как все 4 картинки были показаны цыкл повторяется снова.
Ни поможете это реализовать?

<style> img {width: 135px; height: 87px; background-color: red} </style> <script> var v = 2000, x, y = new Array (), z; function F () { x = document.getElementById ('mTBL'); y [0] = y [1] = y [2] = '0123'; for (var j = 0, w = x.getElementsByTagName ('IMG'); j < w.length; j++) w [j].style.backgroundColor = 'red'; z = window.setTimeout ('S ()', v); } function S () { for (var q, j = 0; j < 3; j++)    {    q = y [j].charAt (parseInt (Math.random () * 12345) % y [j].length);    x.rows [j].cells [q].firstChild.style.backgroundColor = 'lime';    y [j] = y [j].replace (new RegExp (q, ''), '');    } if (y [0].length) window.setTimeout ('S ()', v) else window.setTimeout ('F ()', v); }  onload = F; </script> <body> <table id="mTBL" cellpadding="0" cellspacing="0"> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> </table> </body>

PS. "style.backgroundColor =" поменяйте на "src ="

PS2. цыкл => цикл; "ни поможете" => "не поможете"

ни скажете как сделать чтобы рисунки менялись не на
style.backgroundColor = 'red' а были бы 12 разных рисунков img1...2

Так сколько у Вас рисунков-то?
12-ть или всё же 24?

Если 12-ть "зелёных", то тогда ЧТО должно показываться на месте отсутствующего рисунка (вместо "красного")?

Да хороший скрипт вышел, спасибо за ошибки
Немного изменил его под себя

<style>      img { width: 135px; height: 87px; background:url(bg_img_right_header.jpg) left top no-repeat; }      </style>      <script>      /* var numimg = 0;             var imgslide=new Array();      imgslide[0]=new Image();      imgslide[1]=new Image();      imgslide[2]=new Image();      imgslide[3]=new Image();             imgslide[0].src ="img-1.jpg";      imgslide[1].src ="img-2.jpg";      imgslide[2].src ="img-3.jpg";      imgslide[3].src ="img-4.jpg";     xx = Math.floor(Math.random( ) * 4); */          var v = 2000, x, y = new Array (), z;      function F ()      {      x = document.getElementById ('mTBL');      y [0] = y [1] = y [2] = '0123';      for (var j = 0, w = x.getElementsByTagName ('IMG'); j < w.length; j++)      w [j].style.backgroundColor = 'red';          z = window.setTimeout ('S ()', v);      }      function S ()      {      for (var q, j = 0; j < 3; j++)         {         q = y [j].charAt (parseInt (Math.random () * 12345) % y [j].length);         /* x.rows [j].cells [q].firstChild.src='img-4.jpg'; */        x.rows [j].cells [q].firstChild.src = 'imgslide[numimg%xx].src';                                  y [j] = y [j].replace (new RegExp (q, ''), '');         }      if (y [0].length) window.setTimeout ('S ()', v)      else window.setTimeout ('F ()', v);      }       onload = F;      </script>

html

<table id="mTBL" cellpadding="0" cellspacing="0"> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> </table>

Где то видимо я неточно описал.
Сейчас картинка сменяется только на 1 рисунок, как сделать чтоб рисунок менялся на 1 из 4
И цикл проходит 1 раз.
Ни подскажете какие изменения сделать?

Рисунков всего у меня 12.
Как сделать чтобы

x.rows [j].cells [q].firstChild.style.backgroundColor = 'lime';

Мы не задавали цвет, а выбрали 1 из 12 рисуноков img-1.jpg...img-12.jpg

Ячеек у Вас двенадцать.
Картинок у Вас тоже двенадцать.
Каждой ячейке соответствует своя определённая картинка.

Вопрос: что должно быть видно в каждой из двенадцати ячеек в момент, когда страница только-только загрузилась?

Да верно,
в момент загрузки страницы в 12 -ти ячейках таблицы должно грузится изображение img-ferst.jpg, после картинки меняются (в первой, 2-ой, 3-ей строке меняется сначала 1 картинка, потом 2,3,4) но эта должен быть рисунок с своим путем img-1.jpeg,...img-12.jpeg а не

x.rows [j].cells [q].firstChild.style.backgroundColor = 'red';

Может здесь как то использовать конструкцию массивов
var imgslide=new Array();
imgslide[0]=new Image();
imgslide[1]=new Image();
imgslide[2]=new Image();
imgslide[3]=new Image();
...
imgslide[11]=new Image();
imgslide[0].src ="img-1.jpg";
imgslide[1].src ="img-2.jpg";
imgslide[2].src ="img-3.jpg";
imgslide[3].src ="img-4.jpg";
...
imgslide[11].src ="img-12.jpg";

Значит, картинок у Вас всё-таки ТРИнадцать, а не ДВЕнадцать?

Одна - одинаковая для всех ячеек на момент загрузки страницы (img-ferst.jpg), и ещё двенадцать разных (для помещения в соответствующие ячейки).
1 + 12 = 13 или будете спорить с арифметикой? :-)
-----

1. Страница загрузилась. В 12-ти ячейках помещены 12-ть одинаковых картинок img-ferst.jpg
2. Через 2 секунды в 3-х ячейках вместо img-ferst.jpg должны появиться соответствующие ячейкам три картинки. В оставшихся 9-ти ячейках - все те же img-ferst.jpg
3. Ещё через 2 секунды уже в 6-ти ячейках - соответствующие 6-ть картинок, а в других 6-ти - img-ferst.jpg
4. Ещё через 2 секунды: в 9-ти картинках - соответствующие 9-ть картинок, в 3-х - img-ferst.jpg
5. Ещё через 2 секунды: во всех 12-ти ячейках - 12-ть соответствующих картинок.
6. Наконец, через ещё 2 секунды во всех 12-ти ячейках все картинки изменяются на первоначальную img-ferst.jpg, т.е. мы возвращаемся к состоянию, описанному в пункте 1. И выполняем пункты 2-6 заново.
7. На всех этапах (пункты 2-5) заменяемые три картинки должны находиться в разных строках таблицы.

Теперь я верно описал Вашу задачу?
Или опять у Вас возникнут какие-то проблемы с арифметикой?

Прочитайте внимательно, исправьте - если я что-то написал неверно.
Только ЧЕЛОВЕЧЕСКИМ языком. Чтобы было "ежу понятно". И чтобы не было проблем с арифметикой.

Свистните - тогда дам код.

Да именно так всё и должно работать.
С кодом не поможете.)

1. Переименуйте Ваши 12-ть картинок следующим образом:

+-----------+-----------+-----------+-----------+ | img00.jpg | img01.jpg | img02.jpg | img03.jpg | +-----------+-----------+-----------+-----------+ | img10.jpg | img11.jpg | img12.jpg | img13.jpg | +-----------+-----------+-----------+-----------+ | img20.jpg | img21.jpg | img22.jpg | img23.jpg | +-----------+-----------+-----------+-----------+

PS. Первая цифра - номер строки таблицы, вторая цифра - номер столбца.

2. Первоначальную картинку - img-ferst.jpg - оставьте с тем же именем.

3. Используйте следующий код:

<style> #mTBL {visibility: hidden} #mTBL img {width: 135px; height: 87px} </style> <script> //Предзагрузка всех 13-ти картинок for (var p = new Array (), j = m = 0; j < 3; j++) for (var k = 0; k < 4; k++)    {p [m] = new Image ();  p [m++].src = 'img' + j + '' + k + '.jpg'} p [m] = new Image ();  p [m].src = 'img-ferst.jpg'; //Собственно скрипт смены картинок var v = 2000, x, y = new Array (), z; function F () { x = document.getElementById ('mTBL'); y [0] = y [1] = y [2] = '0123'; for (var j = 0, w = x.getElementsByTagName ('IMG'); j < w.length; j++) w [j].src = 'img-ferst.jpg'; x.style.visibility = 'visible'; z = window.setTimeout ('S ()', v); } function S () { for (var q, j = 0; j < 3; j++)    {    q = y [j].charAt (parseInt (Math.random () * 12345) % y [j].length);    x.rows [j].cells [q].firstChild.src = 'img' + j + '' + q + '.jpg';    y [j] = y [j].replace (new RegExp (q, ''), '');    } if (y [0].length) window.setTimeout ('S ()', v) else window.setTimeout ('F ()', v); }  onload = F; </script> <body> <table id="mTBL" cellpadding="0" cellspacing="0"> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> <tr><td><img></td><td><img></td><td><img></td><td><img></td></tr> </table> </body>

-

Очень хороший скрипт получился.
Спасибо Вам огромное,