Hello and welcome to our community! Is this your first visit?
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
    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!


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

    For example:
    <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. ...
    <script type="text/javascript">
    var themes = [ "BLUE", "RED", "GREEN" ];
    var theme = themes[ Math.floor( Math.random() * themes.length ) ];
    <script type="text/javascript">
    document.write( '<div class="' + theme + '">');
    ... contents ...
    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
    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