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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Sep 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy random background images in a table cell

    does anyone know how to display a background image in a table cell that changes randomly each time the viewer reloads the page.

    i've found scripts for random background color, random images, and random background images, but not random images that are a background in a specific table cell.

    is this even possible?

    thx 4 ur time

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    338
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    function preloadImages() {
    var _imgs = new Array();
    for(var i = 0; i < preloadImages.arguments.length; i++) {
    _imgs[i] = new Image();
    _imgs[i].src = preloadImages.arguments.length[i];
    } return _imgs;
    }
    
    function randomImage(imgArr) {
    var random = Math.random()*(imgArr.length - 1);
    return imgArr[random].src;
    }
    
    var preloads = preloadImages("http://www.blah.com/blah.gif", "http://www.blah.com/blah2.gif");
    document.getElementById("thisCell").style.backgroundImage = url(randomImage(preloads));
    Hope that helps!

    Happy coding!

    Note: untested.
    Last edited by nolachrymose; 09-26-2003 at 09:24 PM.

  • #3
    New to the CF scene
    Join Date
    Sep 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    random background image in a table

    document.getElementById("thisCell") -- how do i designate the table i want to "thisCell"? I'm new to this code stuff so i don't know how to identify the table specifically, or how to designate it a variable i can use?

  • #4
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <table>
      <tr>
        <td id="thisCell">This is the cell</td>
      </tr>
    </table>
    for example. The id="" attribute is what you want.
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!

  • #5
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by nolachrymose View Post
    Code:
    function preloadImages() {
    var _imgs = new Array();
    for(var i = 0; i < preloadImages.arguments.length; i++) {
    _imgs[i] = new Image();
    _imgs[i].src = preloadImages.arguments.length[i];
    } return _imgs;
    }
    
    function randomImage(imgArr) {
    var random = Math.random()*(imgArr.length - 1);
    return imgArr[random].src;
    }
    
    var preloads = preloadImages("http://www.blah.com/blah.gif", "http://www.blah.com/blah2.gif");
    document.getElementById("thisCell").style.backgroundImage = url(randomImage(preloads));
    Hope that helps!

    Happy coding!

    Note: untested.
    Please forgive me for bumping this topic. I'm just having troubles trying to figure out how you put the code into my html ;_;' I'm knew to Java script so im not even sure were this goes

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Might help:
    Code:
    <script type="text/javascript">
    window.addEventListener?window.addEventListener('load',function()
    	{
    	ray.rand('thisCell');
    	},false):
    window.attachEvent('onload',function()
    	{
    	ray.rand('thisCell');
    	}); // FF : IE1
    	
    var ray=
    {
    bgArr:['red','green','#565656','url(image.jpg)','url(image2.jpg)'], // Background you wish to show on the cell
    rand:function(el)
    	{
    	var num = Math.floor(Math.random()*this.bgArr.length);
    	this.getID(el).style.background=this.bgArr[num];
    	},
    getID:function(el){return document.getElementById(el);}
    }
    </script>
    <table>
      <tr>
        <td id="thisCell">This is the cell</td>
      </tr>
    </table>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you soo much!!! ^.^

  • #8
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok i have a couple of questions for this script. Is there a way to have the background NOT repeat, also to have the background positioned to the right.

  • #9
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is that possible to do it not thank u ^.*' sorry

  • #10
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Code:
    bgArr:['red','green','#565656','url(image.jpg) top right no-repeat','url(image2.jpg) top right no-repeat']
    For further reading:
    http://www.w3schools.com/css/css_background.asp
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #11
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Pasadena, California
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Can the embedded script be made external?

    Thanks for a great script!

    I'm trying to make it external so visitors just don't view source and see my random photo names. Is something like this possible? So it could be invoked by:

    <body onload="random_background_image();">

    Here is the code below.

    External JavaScript function (doesn't work... copies the working embedded script above in a previous post)
    -------------------------------------------------

    function random_background_image()
    {
    window.addEventListener?window.addEventListener('load',function()
    {
    ray.rand('thisCell');
    },false):
    window.attachEvent('onload',function()
    {
    ray.rand('thisCell');
    }); // FF : IE1

    var ray=
    {
    bgArr:['url(/images/photo_01.jpg)','url(/images/photo_02.jpg)','url(/images/photo_03.jpg)','url(/images/photo_04.jpg)','url(/images/photo_05.jpg)','url(/images/photo_06.jpg)'], // Background you wish to show on the cell
    rand:function(el)
    {
    var num = Math.floor(Math.random()*this.bgArr.length);
    this.getID(el).style.background=this.bgArr[num];
    },
    getID:function(el){return document.getElementById(el);}
    }




    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Random Background Image</title>
    <script language="JavaScript" src="my_scripts.js"></script>
    </head>

    <body onload="random_background_image();">
    <table border="5">
    <tr>
    <td id="thisCell">This is the cell</td>
    </tr>
    </table>
    </body>
    </html>

  • #12
    New to the CF scene
    Join Date
    Feb 2009
    Location
    Pasadena, California
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Would pre-loading images speed up the script?

    In relation to the previous post, would pre-loading images speed up the script?

    In an external javascript file, I used:

    function newImage(arg)
    {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }

    function preload_images()
    {
    photo_01 = newImage("/images/photo_01.jpg");
    photo_02 = newImage("/images/photo_02.jpg");
    photo_03 = newImage("/images/photo_03.jpg");
    photo_04 = newImage("/images/photo_04.jpg");
    photo_05 = newImage("/images/photo_05.jpg");
    photo_06 = newImage("/images/photo_06.jpg");
    }


    And then called it with:
    <body onload="preload_images();>

    I wasn't sure if it seemed quicker or not -- any thoughts on this?

  • #13
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    You need to remove this part in the script:
    Code:
    function random_background_image()
    {
    window.addEventListener?window.addEventListener('load',function()
    {
    ...and this part in your markup:
    Code:
    <body onload="random_background_image();">
    That will make the script work again.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Posting Permissions

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