SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS Random Table Background Image Rotator script wanted.

    Hi All,
    Has anybody an idea where I can get a free JS Random Background Image Rotator script? What I really want is, any time the site is visited or the refresh button is hit, a new background image should appear.

    I have been searching the whole web for this script for the past two weeks with no success. I shall be very glad if somebody will help me out.

    Thanks in advance.

    CocoX.
    Last edited by CocoX; Oct 29, 2003 at 06:46.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  2. #2
    SitePoint Member
    Join Date
    Oct 2003
    Location
    USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Place this script segment after the opening body tag.
    Code:
    <script type="text/javascript">
    var bg_list = new Array("bkggif.gif", "marble.gif", "sidebar.gif");
    var rand_bg = bg_list[ Math.floor( Math.random() * bg_list.length ) ]; 
    if (document.getElementsByTagName)
      document.getElementsByTagName('body')[0].style.backgroundImage = "url("+rand_bg+")";
    </script>

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Uneverno,
    Thanks so much for the script but I still have some questions.
    Where exactly do you want me to put the script?
    Can I use it as a Table-background?

    I guess I have to explain further where exactly I want the image to appear. What I really want is, I don't want the background image to appear in the whole page but rather a particular Table as a TABLE BACKGROUND.
    e.g.
    <table border="0" width="100%" align="center" style="background-image:url('../images/bg_image001.jpg'); background-repeat:no-repeat;">


    Is that really possible? I have been seeing this function in a lot of websites.

    Thanks again in advance.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  4. #4
    SitePoint Member
    Join Date
    Oct 2003
    Location
    USA
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want to apply it to a table rather than the page, change the last two lines of the code to:

    Code:
    if (document.getElementById)
      document.getElementById('tableID').style.backgroundImage = "url("+rand_bg+")";
    Place the script segment after the table.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Uneverno,
    Thanks again but I could not get the image appear in the TABLE. I am getting Object Requird error.

    Here is what I did and I am not really sure whether I am missing something:

    <html>
    <head>
    <title>No title</title>
    </head>
    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
    <table border="1">
    <script type="text/javascript">
    var bg_list = new Array("bkggif.gif", "marble.gif", "sidebar.gif" ); var rand_bg = bg_list[ Math.floor( Math.random() * bg_list.length ) ]; if (document.getElementById) document.getElementById('tableID').style.backgroundImage = "url("+rand_bg+" )";
    </script>
    <tr>
    <td width="947" height="452">
    </td>
    </tr>
    </table>
    </body>
    </html>
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    Maryland, USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi CocoX,
    The reason this is not working is because JavaScript can not find the ID 'tableID'. To fix this, add an ID to your table tag

    Code:
    <table border="1" ID='tableID'>

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by danielng5
    Hi CocoX,
    The reason this is not working is because JavaScript can not find the ID 'tableID'. To fix this, add an ID to your table tag

    Code:
    <table border="1" ID='tableID'>
    Hi Danielng5,
    Thanks so much for the tip.

    Sorry I have added the TableID but nothing happen.

    The error is still there: OBJECT REQUIRED.

    Thanks again.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CocoX:

    The script you're using there isn't really 'random' at all - because, every time the user refreshes the page, another 'random' background is chosen, and it could easily be the same one, with the images repeating irregularly, over and over. Did you want a different background every time the page is loaded, cycling through a group of images in a fixed order? The 'fixed' order would be randomized, of course, every time someone came to your site.
    ::: certified wild guess :::

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    CocoX:

    The script you're using there isn't really 'random' at all - because, every time the user refreshes the page, another 'random' background is chosen, and it could easily be the same one, with the images repeating irregularly, over and over. Did you want a different background every time the page is loaded, cycling through a group of images in a fixed order? The 'fixed' order would be randomized, of course, every time someone came to your site.
    Yea Adios that's exactly what I am looking for. Please could you help me out.

    Thanks in advance.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure...give me a sec' (eating lunch!).

    Post your image urls - if they're online (or zip them up and attach them) - and anything else you think would help.
    ::: certified wild guess :::

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adios,
    Sorry I am on a very initial stay so not much to show.

    Thanks again.

    CocoX.

  12. #12
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <base href="http://www.SitePoint.com/graphics/">
    <script type="text/javascript" language="javascript">
    
    var img_urls = [ 
                     'v2/heads/default3.jpg' , 
                     'author_andrew.jpg' , 
                     'nigel.jpg' , 
                     'author_ivan.jpg' ,
                     'mike.jpg' , 
                     '1kev.jpg' , 
                     'author_josh.jpg' ,
                     '1danielk.jpg' , 
                     'patrick.jpg' 
                   ];
    
    var idx_array, idx_str, obj;
    if (!/__RANDOM_BG_IMAGE_ROTATOR__/.test(self.name))
    {
    	var idx, i, ind1, ind2, temp, arraylength = img_urls.length;
    	idx_array = new Array(arraylength);
    	for (i = 0; i < arraylength; ++i)
    		idx_array[i] = i;
    	for (i = 0; i < arraylength; ++i)
    	{
    		ind1 = Math.floor(Math.random() * arraylength);
    		ind2 = Math.floor(Math.random() * arraylength);
    		temp = idx_array[ind1];
    		idx_array[ind1] = idx_array[ind2];
    		idx_array[ind2] = temp;
    	}
    	idx_str = idx_array.join(',');
    }
    else 
    {
    	idx_str = self.name.split('__RANDOM_BG_IMAGE_ROTATOR__')[1];
    }
    
    idx_array = idx_str.split(',');
    var first_idx = idx_array.splice(0,1);
    var TABLE_background = img_urls[first_idx];
    idx_array[idx_array.length] = first_idx;
    idx_str = idx_array.join(',');
    self.name = '__RANDOM_BG_IMAGE_ROTATOR__' + idx_str;
    obj = new Image();
    obj.src = img_urls[idx_array[0]];
    
    onload = function() {
    	document.getElementById('sample').style.backgroundImage = 'url(' + TABLE_background + ')';
    	document.getElementById('readout1').value = ' Array---> [' + idx_array + ']'; //demo only
    	document.getElementById('readout2').value = ' Array Index---> ' + idx_array[0]; //demo only
    	document.getElementById('readout3').value = ' URL---> ' + TABLE_background; //demo only
    }
    
    </script>
    </head>
    <body>
    <table id="sample" width="392" height="270" border="1" style="margin:20px auto;">
    <tr>
    <td></td>
    </tr>
    </table>
    <p>
    <input type="text" id="readout1" style="width:200px;display:block;margin:0px auto;text-align:center;">
    <input type="text" id="readout2" style="width:200px;display:block;margin:0px auto;text-align:center;">
    <input type="text" id="readout3" style="width:200px;display:block;margin:0px auto;text-align:center;">
    </p>
    <input type="button" value="refresh" style="width:200px;display:block;margin:20px auto;" onclick="self.location.reload()">
    </body>
    </html>
    Last edited by adios; Oct 29, 2003 at 20:19.
    ::: certified wild guess :::

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi adios,

    YOU ARE MY HERO!!

    Thanks a million times. I am still battling it out Netscape. IE seems to be working perfect.

    What about browser compartibility? The images doen't seems to be appearing in Netscape or or does it got something to do with positioning of the images with STYLE.

    Any idea what might be happening?



    Thanks again.

    CocoX.

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi adios,
    YOU WILL ALWAYS BE MY HERO!!

    Everything is working perfectly now. I figure out what went wrong and is now corrected.

    Thanks again and I will surely get back to you when the site is online.

    CocoX.

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi adios,
    Here am I again with another question or problem.

    I am trying to use the script for a PHP integrated website whereby, I am having HEADER and FOOTER for all pages. But the problem is I am already having two other Javascripts in the HEADER so, somehow I am having problem getting the script to work. When I tried to get all the three javascripts to work, it's only the Random Table Background Image appearded to be working and rest were dead and distorted the whole page.

    With the above problem, where exactly can I put the script and espacially; <base href="http://www.mydomain.com/js_imageslide/">.

    Thanks again in advance.

    CocoX.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  16. #16
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi again CocoX.

    Don't think that's answerable without seeing what's going on. Possibly over-writing an onload handler....could you post a url/more information about what you've got. Could (maybe) skip the PHP if that simplifies things; the scripts & the way they're being called could be enough.

    The <base href... is completely unnecessary! Just used it to shorten the url for the sitepoint thumbnails used in the demo.
    ::: certified wild guess :::

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi adios,
    Well, I have been waiting to hear something from you all along. So please could you go to my url main page to see what I am talking about.

    The js that controls the menu is no more functioning and I don't know how to go about it by changing the onLoad handler to load the menu.

    It would really be nice to hear a comment from you.

    Thanks again in advance.

    CocoX.

  18. #18
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CocoX...don't see the url.

    Be glad to look at it - probably something simple - but it's 1 AM here (Bay Area) and I'm tired. PMs are not a good way to communicate around here, as many (including me) tend to neglect them.

    Post the link and I'll try and look tomorrow; anyone else is welcome to weigh in.
    ::: certified wild guess :::

  19. #19
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With IE everything seems to be working fine. All the menu buttons appear as it's suppose to be.

    Netscape could not show the menu and its effects. So I guess the problem lies with Netscape.

    Anyway, it's not the best but I am still working on it.

    Check it up and let me know.

    CocoX.
    Last edited by CocoX; Nov 15, 2003 at 16:12.
    P E A C E IS THE ONLY WAY TO P E A C E ...!

  20. #20
    SitePoint Enthusiast
    Join Date
    Feb 2003
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi adios,
    Have you seen what I am talking about? Please let me know whether this problem can be solve or not. You know, I am not a JS prgrammer but can really tweak or modify it to work, so pls help.

    Sorry the problem is not solved. I overlooked the browser compatibility.

    The IE handles the script differently as the Netscape and I don't know how to do the onLoad handle to load both images successfully.


    Thanks again in advance.

    CocoX.
    Last edited by CocoX; Nov 9, 2003 at 06:57.
    P E A C E IS THE ONLY WAY TO P E A C E ...!


Bookmarks

Posting Permissions

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