Движение фона на странице

[TANZWUT]

Осталась у меня сохранённая страничка с Для просмотра ссылки Войди или Зарегистрируйся

Смысл был пустить картинку по кругу под мониторами. Достаточно простая задача, казалось бы, но я столкнулся с некоторыми трудностями...
Первое решение было простое до оргазма. Я просто повесил картинку с "вырезанными" мониками, а в background залил фон и яваскриптом двигал фон уже.
Хороший способ и все было бы отлично, если бы при этом IE не менял постоянно курсор на курсор с часиками. Это сильно доставало. Тогда сделал по другому.
Берется div и img с абсолютным позиционированием таким образом, чтобы картинка была выше. div`у задаем конкретные размеры и делаем overflow:hidden; Помещаем в него 2 картинки и яваскриптом двигаем их, причем если первая имеет left<-999px, то ее left=img2.width. Соответственно и со второй картинкой. Таким образом IE глючить перестало, славо богу. Вот функция на js:

<script type="text/javascript">
  document.getElementById("img1").src="/img/bg/1.jpg";
  document.getElementById("img2").src="/img/bg/1.jpg";
  document.getElementById("img2").style.left="0px";
  document.getElementById("img1").style.left="999px";
  function bg(){
    if(parseInt(document.getElementById("img2").style.left)<=-999){
      document.getElementById("img2").style.left='999px'
    }
    if(parseInt(document.getElementById("img1").style.left)<=-999){
      document.getElementById("img1").style.left='999px'
    }
    document.getElementById("img1").style.left=parseInt(document.getElementById("img1").style.left)-1+"px";
    document.getElementById("img2").style.left=parseInt(document.getElementById("img2").style.left)-1+"px";
  }
  setInterval('bg();', 20);
  </script>

Это движение картинок справа налево. Аналогично можно сделать любое другое движение.


(c) Trinux

Пример приатачил...

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

вывод логотипа:

main.tpl :
*****************
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr valign="top">
    <td>
        <div class="logo-bg">
        <div class="logo-left"></div>
        <div class="logo-right"></div>
    </div></td>
    <td width="2"></td>
    </tr></table>
*****************


css/style.css :

*****************
.logo-bg {
    height: 239px;
    background: url(../images/logo-bg.png) repeat-x;

}
.logo-left {
    width: 191px;
    height: 239px;
    background: url(../images/logo-left.png) no-repeat;
    float: left;
}
.logo-right {
    width: 220px;
    height: 239px;
    background: url(../images/logo-right.png) no-repeat;
    float: right;
}
*****************

хэлп плиз

 

[PHP_Master]

Какое отношение это имеет к PHP?

 

[a-k1ll93]

НЕ понял суть вопроса...

Добавлено через 35 секунд
тем более это не php

 

[perceptron]

А не проще ли на Flash облака сделать - тем более примеров туча...

 

[NicClosers]

думаю флеш тоже хорошо, но не то.
Тоже бы хотелось услышать решение этой проблемы.

 

[TANZWUT]

Вобщем было забито на это дело и заюзан Для просмотра ссылки Войди или Зарегистрируйся "слизав" шапку Для просмотра ссылки Войди или Зарегистрируйся (по тематике школьного сайта подошло), но щас опять вернулся к этому вопросу. делаю редизайн компьютерного магазина, поменял картинки + фоновую в движении сделал рандомной при помощи php+.htaccess, не пойму где собака порылась, как только перенесу на сайт - уже не работает)))