View Full Version : Help required - More than one simultaneous image change on page refresh...

06-14-2010, 10:46 PM
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!


Old Pedant
06-14-2010, 11:42 PM
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>.