+ Reply to Thread
Results 1 to 16 of 16
  1. #1
    Ultimate Member J1mmy's Avatar
    Join Date
    Apr 2005
    Location
    UK, England
    Posts
    2,895
    Blog Entries
    1

    Changing background randomly in sync with image

    I would like to create a page where certain areas with backgrounds would randomly change as the page is refreshed.

    I know this is possible with images, but Im not sure about the background, as this would be CSS?

    However, I would like this change to be in sync with the image too.

    For example. The page background is orange, the image should also be orange. The page is refreshed, the background is now blue, the image should now be blue. See what I mean?

    Is this possible?

  2. #2
    Ultimate Member EXreaction's Avatar
    Join Date
    Aug 2003
    Location
    Madison, WI
    Posts
    15,223
    Blog Entries
    1
    I am pretty sure it could be done with CSS...but I am not experienced enough in it to know for sure. :P

    You could use either Javascript, or PHP. Either should be able to do it quite easily.
    "The problem with quotations on the internet is that the sources are hard to verify" - Abraham Lincoln

  3. #3
    Member ruleofnike69's Avatar
    Join Date
    Mar 2007
    Location
    Bowling Green Ky.
    Posts
    443
    I'm thinking pinacle would do the job but I'm not really sure.......It might be worth looking at.
    No man is an island

  4. #4
    Ultimate Member EXreaction's Avatar
    Join Date
    Aug 2003
    Location
    Madison, WI
    Posts
    15,223
    Blog Entries
    1
    Pinnacle?

    What are you talking about?
    "The problem with quotations on the internet is that the sources are hard to verify" - Abraham Lincoln

  5. #5
    Super Stealthy Moderator RicheemxX's Avatar
    Join Date
    Jan 2003
    Location
    Outside the box
    Posts
    8,572
    Blog Entries
    4
    J1mmy here's a decent tutorial {scroll down to "Randomness, my favorite"} on using php and css you wouldn't get them to sync properly using that method and I'm not sure you could anyways as you would be using two different random variables but that will give you an idea

    here's another tut

    one using dhtml this might be what you are looking for!

    one for java with mouse over effects

    all these in a quick google
    Last edited by RicheemxX; March 26th, 2007 at 07:07 PM.
    Be a Liberal, blame everyone else!!

  6. #6
    Member ruleofnike69's Avatar
    Join Date
    Mar 2007
    Location
    Bowling Green Ky.
    Posts
    443
    Ya know what Ex.........I'm probably am out of school on this one.
    I work a lot with pinacle studios stuff......Hollywood FX.
    something about your discription sounded familiar to a progect I worked on in that program.
    Sorry about that........you guys figure it out on your own.........sorry to have interfeered.
    Good luck.
    No man is an island

  7. #7
    Ultimate Member EXreaction's Avatar
    Join Date
    Aug 2003
    Location
    Madison, WI
    Posts
    15,223
    Blog Entries
    1
    The kind of programs you are talking about are for video editing (unless they do make apps that do stuff other than that).

    Jimmy is looking for help designing a website.
    "The problem with quotations on the internet is that the sources are hard to verify" - Abraham Lincoln

  8. #8
    Member ruleofnike69's Avatar
    Join Date
    Mar 2007
    Location
    Bowling Green Ky.
    Posts
    443
    I know ex......that is why I bowed out.
    My recollection of FX is that there were backround capabilities as well as color variations..... and you can work frame by frame. But it has been so long now since I got to play in that area ......I would look stupid suggesting someone take their time investigating...........so I apologize for taking yalls time.
    carry on and good luck.
    And it is definatly not a web page development program.
    Last edited by ruleofnike69; March 26th, 2007 at 07:45 PM.
    No man is an island

  9. #9
    Ultimate Member kenboyles72's Avatar
    Join Date
    Aug 2004
    Location
    Gladewater, TX
    Posts
    1,188
    Changing one or the other is quite easy, but to sync it would be pretty hard. Here's a tutorial using javascript to randomly change pics on refresh.

  10. #10
    Ultimate Member J1mmy's Avatar
    Join Date
    Apr 2005
    Location
    UK, England
    Posts
    2,895
    Blog Entries
    1
    Thanks for the links.

    Im thoroughly familiar with randomly changing backgrounds/images with a single target. Its just doing doing two at the same time in sync, thats the problem

    RicheemxX, your 3rd link was pretty close. However, I don't think they sync together, check out the example. They have two targets each with indivdual random scripts.

    I think, if I get get one random script and set two targets and two source folders, there just has to be some instructions saying, 'pick the same numnber from the other folder' and then they should create the same coloured images.

    Okay, there are two targets, and the script has to select a number between 1 and 5 from two folders. From the primary folder it for the background it pick 3, then there needs to be an 'IF' function that say, 'If you pick this number, pick the same from this folder' then it should apply it two the two different targets.

    Get what Im trying to say?

    It may work, but I don't know how to write it

  11. #11
    Ultimate Member EXreaction's Avatar
    Join Date
    Aug 2003
    Location
    Madison, WI
    Posts
    15,223
    Blog Entries
    1
    No, no you don't have to do that...

    What I would do:

    create a random number between 1 and the number of colors you want

    use a switch case to check it
    (here is a demo switch case in PHP if you don't know how to make one)
    Code:
    switch ($rand)
    {
      case 1 :
        $background = blue;
        $other_place = blue;
        $other_place2 = blue;
        break;
      case 2 :
        $background = red;
        $other_place = red;
        $other_place2 = red;
        break;
      case 3 :
        $background = green;
        $other_place = green;
        $other_place2 = green;
        break;
    }
    But instead of setting variables in the switch case, with javascript you would just do document.bgcolor = blue; (or something like that, I am not all that well versed on my javascript interacting with HTML).

    Or, if there are a lot of places that the color needs to be changed for, use the switch case to set a variable to the color you want, then after the switch case list all the places you want to change the color and set them equal to the variable you ste in the switch case.

    "The problem with quotations on the internet is that the sources are hard to verify" - Abraham Lincoln

  12. #12
    Ultimate Member J1mmy's Avatar
    Join Date
    Apr 2005
    Location
    UK, England
    Posts
    2,895
    Blog Entries
    1
    I see what you mean...

    By the way, the 'other place' is actually an image. Would this still work?

    This is harder than I thought, maybe I should just forget about it for a while...

  13. #13
    Ultimate Member EXreaction's Avatar
    Join Date
    Aug 2003
    Location
    Madison, WI
    Posts
    15,223
    Blog Entries
    1
    You can't change the color in an image easily.

    But you can make a div, or table's background image become a different image. As long as you have other images with the colors you want in them it will be basically the same way.
    "The problem with quotations on the internet is that the sources are hard to verify" - Abraham Lincoln

  14. #14
    Ultimate Member J1mmy's Avatar
    Join Date
    Apr 2005
    Location
    UK, England
    Posts
    2,895
    Blog Entries
    1
    Yep, Im aware about the image in the background, but I'd prefer the proper image to be display insted of it as a background on the page.

    Hmmmm, I'll probabaly give think more thought in the future...

    Thanks

  15. #15
    Ultimate Member EXreaction's Avatar
    Join Date
    Aug 2003
    Location
    Madison, WI
    Posts
    15,223
    Blog Entries
    1
    What do you mean?

    I was talking about if you use an image for tables, like <th> or the style you can still make them images...

    We are confusing each other.
    "The problem with quotations on the internet is that the sources are hard to verify" - Abraham Lincoln

  16. #16
    Ultimate Member J1mmy's Avatar
    Join Date
    Apr 2005
    Location
    UK, England
    Posts
    2,895
    Blog Entries
    1
    Not to worry, I have the solution!

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function changeBkground(){
      var colors = new Array("orange", "blue", "red", "yellow", "green");
      var index = Math.floor(Math.random()*colors.length);  
      document.body.style.backgroundColor = colors[index];
      document.getElementById("color").src = colors[index] + ".gif";
    }
    </script>
    </head>
    <body onload="changeBkground()">
    <img id="color" src="default.gif" alt="" />
    </body>
    </html>


    I'm going to implement this baby tomorrow to see if it works.

Quick Reply Quick Reply

If you are already a member, please login above.

What is 10 and 5 added together?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Fading image into background
    By jutah in forum Graphic Design and Digital Photography
    Replies: 9
    Last Post: August 27th, 2006, 03:42 PM
  2. Repeating Background Image in a Table
    By soma104 in forum Webmastering and Programming
    Replies: 3
    Last Post: December 1st, 2005, 05:00 PM
  3. css linking background image?
    By ClubMed in forum Webmastering and Programming
    Replies: 4
    Last Post: January 7th, 2005, 10:05 AM
  4. Background Image Missing in IE
    By Ruler2112 in forum Webmastering and Programming
    Replies: 1
    Last Post: September 28th, 2002, 02:00 AM

Posting Permissions

  • You may post new threads
  • You may post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Copyright 2014 All Enthusiast, Inc