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 14 of 14
  1. #1
    New Coder
    Join Date
    Feb 2003
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need to load a random set of BG image slices

    I want to load a set of background images into three different columns. Its really one image sliced into three. I need each set of three images to be called and loaded together. For example: col1-bgImg1.jpg, col2-bgImg1.jpg, col3-bgImg1.jpg --- these would be one series.

    I mostly work in Flash. Using actionscript I would generate a random number betwees say 1-3 and pass that number as a variable through a function that would concactenate the image name with the variable generated. I think I need to do something similar with JS, but I'm not too familar with Javascript syntax. Would appreciate any help. Thanks.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Javascript and Actionscript are almost indentical in many ways.

    Code:
    var rand = Math.floor( Math.random() * 3 );
    document.getElementById('col1').style.backgroundImage = "url(images/col1-bgImg" + rand + ".jpg);";
    document.getElementById('col2').style.backgroundImage = "url(images/col2-bgImg" + rand + ".jpg);";
    document.getElementById('col3').style.backgroundImage = "url(images/col3-bgImg" + rand + ".jpg);";
    Then just give your three table-cells ids...
    Code:
    <tr>
    <td id="col1"></td>
    <td id="col2"></td>
    <td id="col3"></td>
    </tr>
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #3
    New Coder
    Join Date
    Feb 2003
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    Yeah, that seems pretty straight forward. I see a lot of very confusing looking JS code sometimes...

    So, the first part of code would go between the <SCRIPT> tags in the <HEAD>?

    Code:
    <head>
    <script> 
    var rand = Math.floor( Math.random() * 3 );
    document.getElementById('col1').style.backgroundImage = "url(images/col1-bgImg" + rand + ".jpg);";
    document.getElementById('col2').style.backgroundImage = "url(images/col2-bgImg" + rand + ".jpg);";
    document.getElementById('col3').style.backgroundImage = "url(images/col3-bgImg" + rand + ".jpg);";
    </script>
    </head>

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes, but you'd need to enclose them in a function and call that function onload. If you don't, the table-cell elements won't exist and you'll get an error

    Code:
    <head>
    <script type="text/javascript">
    function init()
    {
        var rand = Math.floor( Math.random() * 3 );
        document.getElementById('col1').style.backgroundImage = "url(images/col1-bgImg" + rand + ".jpg);";
        document.getElementById('col2').style.backgroundImage = "url(images/col2-bgImg" + rand + ".jpg);";
        document.getElementById('col3').style.backgroundImage = "url(images/col3-bgImg" + rand + ".jpg);";
    
    }
    </script>
    </head>
    
    <body onload="init()">
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #5
    New Coder
    Join Date
    Feb 2003
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hmm...

    Okay, I've got the function going and the ID tags, but the page is still not loading the background images. The images are all labeled correctly. Would you ming check my pages for me? Appreciate your help. Thanks again:

    http://www.maanik.com/richmond

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    New Coder
    Join Date
    Feb 2003
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image naming mistake

    Okay, well, apparently I am an idiot and I didn't have the images names correctly. they were labeled col1-bg1.jpg ...I fixed that now its working! Thanks, this is really going to help me out. Appreciate all the help...

  • #8
    New Coder
    Join Date
    Feb 2003
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i see an error on your page, no image?

    anyway, this might help too, if you are repeating parts of images and don't always want the whole thing:
    http://msdn.microsoft.com/library/de...rties/clip.asp

    seems to me that AS is easier! i m not getting how to import JS files, etc etc.
    ; )
    jenn

  • #9
    New Coder
    Join Date
    Feb 2003
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks

    Sorry I was working locally and didn't upload the working version. Check it now..I also had to change the function slightly because the random function generates "0" as one of the numbers. This is the working code:

    Code:
    <script type="text/javascript">
    function init()
    {
        var rand = Math.floor( (Math.random() * 3)+1);
        document.getElementById('col1').style.backgroundImage = "url(images/col1-bg" + rand + ".jpg);";
        document.getElementById('col2').style.backgroundImage = "url(images/col2-bg" + rand + ".jpg);";
        document.getElementById('col3').style.backgroundImage = "url(images/col3-bg" + rand + ".jpg);";
    
    }
    </script>
    Yeah, I agree, I'm much more comfortable with AS but I like the idea of implementing CSS with Javascript....Thanks for the link. I'll check it out.

  • #10
    New Coder
    Join Date
    Feb 2003
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    broken link?

    Jenn, You link didn't work for me. Can you repost it please?

  • #11
    New Coder
    Join Date
    Feb 2003
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://msdn.microsoft.com/library/de...rties/clip.asp

    trying again- can't figure out how to keep my posts plain text. it's msdn library regarding clip Attribute | clip Property
    object.style.clip [ = sClip ]

    Here is example they give:
    <IMG ID="sphere" SRC="sphere.jpg"
    STYLE="position:absolute;top:0cm;left:0cm;">
    <BUTTON onclick="sphere.style.clip='rect(0.2cm 0.6cm 1cm 0.1cm)'">Clip Image</BUTTON>

    If you haven't already checked these, they are also important: position and z-index.

    good luck,
    jenn

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dude, neonwhiskey, satyanaas is just trying to set some images as backgrounds of table cells. Why are you trying to confuse him/her with clip, z-index and position? They are irrelevant here.

    satyanaas, is it working for you?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #13
    New Coder
    Join Date
    Feb 2003
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Its cool

    Hey, no worries., no confusion. I got the random BG's going (thanks beetle!): www.maanik.com/richmond

    We went on a little tangent with the other stuff. I was just trying to check it out for general info. The javascript function + css id info has been enlightening thanks again to both of you.

  • #14
    New Coder
    Join Date
    Feb 2003
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beetle, don't be upset, he's a Flasher & so am I... Knowing where he's coming from, I pointed out some things he'll want very soon, which are different from Actionscript. Most of the rest is exactly the same.

    Jenn


  •  

    Posting Permissions

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