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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Location
    UK
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help required - More than one simultaneous image change on page refresh...

    Hi all!

    My first post here, searched around for a good website to get some assistance and chose CodingForums.com! I'm a graphic designer, and trying my best at web design too although it's not my profession so I'm still beginner level in a sense I guess.

    Anyway, my dilemma at the moment is that I have produced a site where the client would like the logo colour/image to change on refresh which I have achieved by scouring the net for codes and altering them. Now, the client wants the shapes behind the sub-headings to match the current logo colour/image on refresh as well. This would mean if the logo changed to the blue logo, I'd need all the sub-headings to be blue, and vice versa for another 3 colours.

    I'm struggling to understand how I can achieve this. At the moment, I have a javascript inside the code of the index page allowing logo image change on refresh but need the sub-headings to change in sync too.

    Can anyone help me out here?

    Any help is greatly appreciated.

    Thanks all!

    WxMx

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Probably the easiest way to do this would be to use CSS.

    For example:
    Code:
    <style type="text/css">
    div.BLUE {
        background-image: url(images/bluepicture.png);
        color: blue;
        background-color: lightblue; 
        ... etc. ...
    }
    div.RED {
        background-image: url(images/redpicture.png);
        color: red;
        background-color: pink; 
        ... etc. ...
    }
    div.GREEN {
        background-image: url(images/greenpicture.png);
        color: green;
        background-color: lightgreen; 
        ... etc. ...
    }
    </style>
    
    <script type="text/javascript">
    var themes = [ "BLUE", "RED", "GREEN" ];
    var theme = themes[ Math.floor( Math.random() * themes.length ) ];
    </script>
    
    ...
    </head>
    <body>
    <script type="text/javascript">
    document.write( '<div class="' + theme + '">');
    </script>
    ... contents ...
    </div>
    </body>
    </html>
    Note that you could alternatively use body.BLUE, etc., and apply the theme to the entire body.

    I assume you are familiar with CSS, so I'm sure you are aware you could have
    Code:
    div.BLUE { ... }
    div.BLUE h2 { ... }
    div.BLUE ul { ... ]
    and so on, so that the choice of class for the outer <div> controls the styles for all the various element types inside the <div>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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