Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2004
    Location
    In front of my computer, Monmorency, Quebec city, Quebec, Canada, North America, Planet Earth, Sol System, Milky Way, Known Universe
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    is it possible to use a GetElementById to set a style ?

    I'm presently working on a background changing thing... but i need a function for each picture. i think it might be possible to use variables and GetElementById to have only one function... do you think it's possible, and how?

    here's the first two functions, basically all the other are the same with some slight differences...

    Code:
    function rotation01()
    {
    document.body.style.background='url("./aa/01.jpg")';
     if(nb==1)
      {
       setTimeout('rotation01()',nextpic);
      }
     else
      {
       setTimeout('rotation02()',nextpic);
      }
    }
    
    function rotation02()
    {
     document.body.style.background='url("./aa/02.jpg")';
     if(nb==2)
      {
       setTimeout('rotation01()',nextpic);
      }
     else
      {
       setTimeout('rotation03()',nextpic);
      }
    }
    the nb var is the max number of images, the nextpic var is the time for the next image to appear.

    Any idea would be greatly appreciated.
    Last edited by MogVonKupo; 07-09-2004 at 04:50 AM.
    There's no getting offa the train we're on. (Barrett)
    Ca va mal (Bruno Blanchet)
    I love having low self-esteem, it makes me feel special. (Jane Lane)
    What did you just said? (Mimiru)
    There's 10 kind of people, those who9 understand binary and those who don't (somewhere on the net)

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,742
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there MogVonKupo,

    Try it like this...

    script
    Code:
    <script type="text/javascript">
    <!--
    var speed=2000;
    count=0;
    
    var bgrdImg=new Array();
        bgrdImg[0]="image0.jpg";
        bgrdImg[1]="image1.jpg";
        bgrdImg[2]="image2.jpg";
        bgrdImg[3]="image3.jpg";
    
    function Rotation() {
        document.getElementById('foo').style.background="url("+bgrdImg[count]+")";
        count++;
    if(count>bgrdImg.length-1) {
        count=0;
      }
    setTimeout('Rotation()',speed);
     }
    onload=Rotation;
    //-->
    </script>
    body
    Code:
    <body id="foo" >
    coothead

  • #3
    New Coder
    Join Date
    Jul 2004
    Location
    In front of my computer, Monmorency, Quebec city, Quebec, Canada, North America, Planet Earth, Sol System, Milky Way, Known Universe
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    it's a solution, but isn't there any way not to declare any picture? like:

    Code:
    document.body.style.background="url(./aa/"+pic+".jpg)";
    as it is now, it's not working, but it's probably just that I missed something...

    By the way, pic is a variable representing a number.

    (sorry if any sentence don't mke much sense, English isn't my first language...)

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If your images are simularly named and sequentially numbered:

    Code:
    <html>
    <head>
    <title>Post Load And Display Sequentially Numbered Images</title>
    <BASE HREF="http://www.freewebs.com/foufou/">
    <script type="text/javascript">
     <!--// WRITTEN BY: WillyDuitt@hotmail.com  02/04/2004 //;
     // PLEASE BEGIN BY ANSWERING THE FOLLOWING QUESTIONS! //;
     // HOW MANY SEQUENTIAL IMAGES WOULD YOU LIKE TO SHOW? //;
        var howMany = 4;
     // USING QUOTES. WHAT IS THE PATH TO THE FIRST IMAGE? //;
        var firstImage  = 'eliza1.jpg';
     // HOW MANY SECONDS BEFORE CHANGING IMAGES(.5 = ½sec) //;
        var speed = 5;
    
     ////////////////////////////////////////////////////////;
     // GLOBAL VARIABLES NO NEED TO EDIT BEYOND THIS POINT //;
        var startNumber = (/\d+(?=\.)/.exec(firstImage));
        var lastNumber  = (startNumber*1)+(howMany-1);
        var nextImage   = (startNumber);
    
      function loadImages(){
        for(var i=startNumber;i<=lastNumber;i++){
         var postLoad = new Array();
             postLoad[i] = new Image();
             postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
        }    newImage();
      }
    
      function newImage(){ 
        if(nextImage > lastNumber){ nextImage = startNumber };
         var image = firstImage.replace(/\d+(?=\.)/,nextImage);
             document.body.style.background = 'url('+image+')';
             setTimeout('newImage()',speed*1000);
             nextImage++;
      }      onload = loadImages;
     //-->
    </script>
    </head>
    
    <body>
    </body>
    </html>
    .....Willy

    Edit: Fixed regular expression to only target numbers immediately prior to a dot (.)
    Last edited by Willy Duitt; 07-09-2004 at 08:30 PM.

  • #5
    New Coder
    Join Date
    Jul 2004
    Location
    In front of my computer, Monmorency, Quebec city, Quebec, Canada, North America, Planet Earth, Sol System, Milky Way, Known Universe
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Lightbulb

    thanks, that's exactly what I was trying to do...
    even if I don't understand a few parts of the code...

    There's no getting offa the train we're on. (Barrett)
    Ca va mal (Bruno Blanchet)
    I love having low self-esteem, it makes me feel special. (Jane Lane)
    What did you just said? (Mimiru)
    There's 10 kind of people, those who9 understand binary and those who don't (somewhere on the net)

  • #6
    New Coder
    Join Date
    Jul 2004
    Location
    In front of my computer, Monmorency, Quebec city, Quebec, Canada, North America, Planet Earth, Sol System, Milky Way, Known Universe
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just made this one out:

    Code:
    function rotation()
    {
     if(picnb!=nb)
      {
       picnb+=1;
      }
     else
      {
       picnb=1
      };
     if(picnb<100)
      {
       if(picnb<10)
        {
         var pic="./aa/00"+picnb+".jpg";
        }
      else
       {
        var pic="./aa/0"+picnb+".jpg";
       }
      }
     else
      {
       var pic="./aa/0"+picnb+".jpg";
      }
     document.body.style.background='url('+pic+')';
     setTimeout('rotation()',nextpic);
    }
    Anyway, thanks for your help^_^ even if my question wasn't really clear...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •